当我们想要元素水平排列的时候，inline-block或者float是最好的选择了，但是当父元素的宽高都设置了的时候，子元素会失效，如下：

代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }
.item1 {
    background: red;
    width: 100%;
    height: 100px;
    display: inline-block
}

.item2 {
    width: 100%;
    height: 100px;
    display: inline-block;
    background-color: yellow;
}
</style> </head> <body> <div class="warp"> <div class="item1"></div> <div class="item2"></div> </div> </body> </html>

　　效果：

很明显不是我们想要的效果，你把怎么解决呢，只需要一句代码即可：

  .warp {

            white-space: nowrap;

        }

　　

当inline-block或者float失效的时候怎么弄的更多相关文章

  1. inline-block,inline,block,table-cell,float

    float:left ---------------------------------------------------------------------------------------- ...

  2. float失效的情况

    前言:在最近的笔试中,两次碰到类似的问题,什么情况下float会失效?我目前知道的有2种: 1)display:none: 2)position:absolute.fixed. (1)display: ...

  3. 关于block和inline元素的float

    CSS float 浮动属性 本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录 1. 页面布局方式:介绍文档流.浮动层以及float属性. 2. float:left :介绍float为 l ...

  4. inline,block,inline-block的区别

    display:block block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度. block元素可以设置width,height属性.块级元 ...

  5. 对table的tr使用display：block显示colspan失效问题的解决

    qqqq <table> <tr> <td id="qqq" colspan="3" style="display:no ...

  6. 块状元素和内联元素 【inline block】

    // 9) { colorRandom += colorArray[randomV - 10]; } else { colorRandom += randomV; } } currentEle.css ...

  7. inline, block, and inline-block

    总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...

  8. display:inline block inline-block 的区别

    原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...

  9. inline,block,inline-block解析

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

随机推荐

  1. 【Unity笔记】UGUI的Image、RawImage控件

    Image控件只能使用Sprite图片,RawImage通常使用Texture类型图片.项目设为2D模式后导入的图片Texture Type会自动转为Sprite. 没有选择源图片时,可以只选择颜色. ...

  2. [uart]3.tty驱动分析

    转自:http://www.wowotech.net/linux_kenrel/183.html 目录: 1 首先分析设备驱动的注册 1.1 uart_register_driver分析 1.2 tt ...

  3. 利用AbstractRoutingDataSource实现动态数据源切换

    需求:系统中要实现切换数据库(业务数据库和his数据库) 网上很多资料上有提到AbstractRoutingDataSource,大致是这么说的 在Spring 2.0.1中引入了AbstractRo ...

  4. （转）windows环境vue+webpack项目搭建

    首先,vue.js是一种前端框架,一般利用vue创建项目是要搭配webpack项目构建工具的,而webpack在执行打包压缩的时候是依赖node.js的环境的,所以,要进行vue项目的开发,我们首先要 ...

  5. Lua 中pairs与ipairs区别

    local tmp_tab = {}; tmp_tab[]="lua"; tmp_tab[]="hello" tmp_tab[]="aaa" ...

  6. mac上php+nginx配置

    brew的安装: ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/install)”php安装和配置bre ...

  7. Xcode使用介绍

    ///// 应用程序文件的组织 Product Name:项目名字 Organization Name:组织机构名称 Company Identifier:公司唯一标识符 Bundle Identif ...

  8. win7控制面板一打开就停止的解决方法

    现象:win7系统,打开控制面板后,弹出提示窗口:资源管理器停止工作,需要重启.点重启后,系统自动重建桌面进程.控制面板根本无法使用. 下面是网上找到的方法,如果都不行再参照后面我的解决方法. 1. ...

  9. CentOS安装ssh服务

    yum search ssh yum install openssh-server service sshd status [编辑]艺搜参考 http://www.cnblogs.com/eastso ...

  10. 关于只能上QQ而其他电脑软件(IE/优酷/腾讯视频...)不能联网的解决

    1.应该是Winsock协议配置有问题,所以进行一下重置工作. 开始-cmd-输入netsh winsock reset命令来重置Winsock目录重新初始化网络环境来恢复网络畅通-重启电脑才能生效 ...