当inline-block或者float失效的时候怎么弄
当我们想要元素水平排列的时候，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失效的时候怎么弄的更多相关文章
- inline-block,inline,block,table-cell,float
float:left ---------------------------------------------------------------------------------------- ...
- float失效的情况
前言:在最近的笔试中,两次碰到类似的问题,什么情况下float会失效?我目前知道的有2种: 1)display:none: 2)position:absolute.fixed. (1)display: ...
- 关于block和inline元素的float
CSS float 浮动属性 本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录 1. 页面布局方式:介绍文档流.浮动层以及float属性. 2. float:left :介绍float为 l ...
- inline,block,inline-block的区别
display:block block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度. block元素可以设置width,height属性.块级元 ...
- 对table的tr使用display：block显示colspan失效问题的解决
qqqq <table> <tr> <td id="qqq" colspan="3" style="display:no ...
- 块状元素和内联元素 【inline block】
// 9) { colorRandom += colorArray[randomV - 10]; } else { colorRandom += randomV; } } currentEle.css ...
- inline, block, and inline-block
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
- display:inline block inline-block 的区别
原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...
- inline,block,inline-block解析
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
随机推荐
- 4款基于jquery的列表图标动画切换特效
网页中列表图标随处可见,特别是移动网页上,基本上的导航都采用了列表图标.今天给大家分享4款基于juqery的列表图标和关闭图标的动画切换特效.喜欢的网友赶紧收藏吧. 在线预览 源码下载 实现的代码 ...
- springMVC demo搭建
1.使用idea新建一个基于maven的web项目,参考 http://www.cnblogs.com/winkey4986/p/5279820.html 2.采取了比较偷懒的配置方法,只配置了一个D ...
- _STORAGE_WRITE_ERROR_
:( _STORAGE_WRITE_ERROR_:./Application/Runtime/Cache/User/788524be80db1959c132efbce25367a0.php 错误位置 ...
- Axel 快速下载
Axel 是一个轻量级下载程序,它和其他加速器一样,对同一个文件建立多个连接,每个连接下载单独的文件片段以更快地完成下载. Axel 支持 HTTP.HTTPS.FTP 和 FTPS 协议.它也可以使 ...
- 可变长度子网掩码（VLSM）在子网划分中的应用
在学习可变长度子网掩码时,必须先熟练掌握二进制与十进制的转化.计算机中数据的单位(字节.位)等知识. 一.什么是可变长度子网掩码? 要理解可变长度子网掩码,先要理解子网掩码:要理解子网掩码,先要理解I ...
- 看板与Scrum：哪个更适合你的团队？
敏捷是理想型指标和原则,看板和Scrum是帮助团队坚持敏捷原则并完成工作的基本框架.本文详细介绍了在Scrum和看板之间做出选择时要考虑的关键因素,以及如果我们无法做出决定时该怎么办. Scrum和看 ...
- CSS3加载动画
图1 通常我们都使用gif格式的图片或者使用Ajax来实现诸如这类的动态加载条,但是现在CSS3也可以完成,并且灵活性更大. 选1个例子看看怎么实现的吧: 效果图: 图2 代码: 使用1个名为'l ...
- 关于Cocos2d-x中定时器的使用总结
1.定义 定时器在大部分游戏中是不可或缺的,即每隔一段时间,就要执行相应的刷新体函数,以更新游戏的画面.时间.进度.敌人的指令等等. cocos2dx为我们提供了定时器schedule相关的操作.其操 ...
- JDK中的序列化和反序列化
题外话:诸事缠身,不知不觉距离上一篇就将近一个月了,读书不易,学习不易,唯有坚持. 写来写去始终不满意,索性贴一个比较好的文章吧! 参考: [Java基础]序列化与反序列化深入分析
- C struct的内存对齐
说明:如果你看到了这篇,请略过. struct是复合类型. 其中的成员在内存中的分布都是对齐的. 这个对齐的意思是,struct的sizeof运算结果必定是其最大类型长度的整数倍. --注意,如果st ...