当我们想要元素水平排列的时候，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. kubernetes 调度相关

    nodeAffinity(主机亲和性),podAffinity(POD亲和性)以及podAntiAffinity(POD反亲和性) nodeAffinity使用场景 : ● 将S1服务的所有Pod部署 ...

  2. linux中的ll（转）

    linux中的ll(转) 操作系统:ubuntu 9.04 ll并不是linux下一个基本的命令,它实际上是ls -l的一个别名. Ubuntu默认不支持命令ll,必须用 ls -l,这样使用起来不是 ...

  3. 官网下载到离线的Adobe Acrobat Reader DC

    Adobe 官方 FTP :ftp://ftp.adobe.com/ Adobe Acrobat Reader DC 下载目录:ftp://ftp.adobe.com/pub/adobe/reader ...

  4. kill 信号大全

    linux kill信号列表$ kill -l1) SIGHUP       2) SIGINT       3) SIGQUIT      4) SIGILL5) SIGTRAP      6) S ...

  5. LINQ教程三：Lambda表达式解剖

    C#3.0(.NET3.5)中引入了Lambda表达式和LINQ.Lambda表达式是使用一些特殊语法表示匿名方法的较短方法. 最基本的Lambda表达式语法如下: (参数列表)=>{方法体} ...

  6. 记录日志框架：log4net使用

    一.log4net简介 Log4net是Apache下一个开放源码的项目,我们可以控制日志信息的输出目的地.Log4net中定义了多种日志信息输出模式.在做项目的时候最头疼的是在程序发布到正式环境之后 ...

  7. Hibernate-【查询】

    01.HQL查询方式 02.QBC查询方式 02.原始SQL查询方式

  8. ruby send respond_to

    http://ruby-metaprogramming.rubylearning.com/html/ruby_metaprogramming_2.html http://galeki.is-progr ...

  9. s:debug标签的错误ConcurrentModificationException

    搭建SSH的时候页面上加入<s:debug>标签后台出现 严重: Servlet.service() for servlet jsp threw exception java.util.C ...

  10. 可供前端工程师选择的精彩CSS框架

    在这里你有一个很酷的框架,收集创建的CSS布局. 如果你不喜欢框架,宁愿使用自己的手写代码以促进自己的发展,请跳过本篇文章. 我想有一个建设性的意见,那就是有选择的使用其优点避开其缺点. 就个人而言, ...