当我们想要元素水平排列的时候,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. Activiti工作流学习要点

    1. 1个插件 在Eclipse中安装Activiti插件,让你可以在Eclipse中绘制Activiti工作流图 2. 1个引擎 ProcessEngine对象,Activiti工作流引擎.这是Ac ...

  2. 应聘Java笔试时可能出现问题及其答案

    有感:应聘Java笔试时可能出现问题及其答案 huij 前段时间因为要参加一个笔试,在准备期间在网上找到了两条关于笔试题目的文章,其中一篇为<<有感:应聘Java笔试时可能出现问题> ...

  3. 服务器响应慢的分析与解决(Linux服务器)

    一.分析思路 1.排除本机自身原因 2.服务器性能分析 3.项目本身分析(不详细说) 4.虚拟机分析 5.数据库分析 二.详细分析方法 1.排除本机自身原因 可以使用站长工具测试网站速度. 2.服务器 ...

  4. mongodb常见管理命令

    ----------1.复制数据库 wind:PRIMARY> show dbs; jinri 0.078GB local 1.078GB test 0.078GB wind 0.078GB w ...

  5. 【C#】复制物体后,给副本命名的规则——用正则表达式

    需求:已经实现物体复制功能后,给新生成的副本进行命名. 问题:因为副本也能被复制,即副本的副本,所以复制品的命名规则会如下图所示. 尝试过用for循环和递归,发现在for循环内部递归返回的话会有问题, ...

  6. JavaScrip——练习(做悬浮框进一步:悬浮窗后缀悬浮窗【感觉这种方法比较麻烦】)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. Ajax-java中的ajax使用,以及编码问题

    结合Ajax类使用:http://www.cnblogs.com/hfultrastrong/p/7267171.html javascript代码: <script type="te ...

  8. Windows下进程通信方式

    当线程分属于不同进程,也就是分驻在不同的地址空间时,它们之间的通讯需要跨越地址空间的边界,便得采取一些与同一进程中不同线程间通讯不同的方法.在Windows程序中,各个进程之间常常需要交换数据,进行数 ...

  9. Fork of LGPL version of JPedal

    https://github.com/on-site/JPedal —————————————————————————————————————————————————————————————————— ...

  10. 『Golang』Martini框架入门

    本文介绍golang中的优秀web开发框架martini! 序 Martini框架是使用Go语言作为开发语言的一个强力的快速构建模块化web应用与服务的开发框架.Martini是一个专门用来处理Web ...