关于inline-block，间隙距离去除，以及div自动换行，高度等问题的一个demo
2016-09-23 18:08
441 查看
<style type="text/css">
div {
width: 100px;
height: 100px;
display: inline-block;
vertical-align: bottom;
}
.div-1 {
background-color: red;
}
.div-2 {
height: 110px;
background-color: blue;
}
.div-3 {
background-color: yellow;
}
.div-4 {
background-color: gray;
}
.div-5 {
background-color: #225433;
}
.div-6 {
background-color: #4488FF;
}
</style>
<body>
<div style="width: 300px;font-size: 0;">
<div class="div-1"></div>
<div class="div-2"></div>
<div class="div-3"></div>
<div class="div-4"></div>
<div class="div-5"></div>
<div class="div-6"></div>
</div>
</body>
div {
width: 100px;
height: 100px;
display: inline-block;
vertical-align: bottom;
}
.div-1 {
background-color: red;
}
.div-2 {
height: 110px;
background-color: blue;
}
.div-3 {
background-color: yellow;
}
.div-4 {
background-color: gray;
}
.div-5 {
background-color: #225433;
}
.div-6 {
background-color: #4488FF;
}
</style>
<body>
<div style="width: 300px;font-size: 0;">
<div class="div-1"></div>
<div class="div-2"></div>
<div class="div-3"></div>
<div class="div-4"></div>
<div class="div-5"></div>
<div class="div-6"></div>
</div>
</body>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- inline-block各浏览器兼容以及水平间隙问题解决方案
- 开发日志：设置<DIV>内容不自动换行，及inline后width和height等失效的问题
- 关于ie7和ie6 中div自动高度的问题
- (笔记)关于CSS一个样式display:block;的换行问题()
- 关于inline-block的间隙问题
- 一个疑惑，为什么在二维数组里可以自动换行存入字符串，以及冒泡的趟数问题？
- 关于div中放入一个img元素导致div高度会多出3px像素的解决问题
- Visual Studio 2017 - Windows应用程序打包成exe文件（2）- Advanced Installer 关于Newtonsoft.Json，LINQ to JSON的一个小demo mysql循环插入数据、生成随机数及CONCAT函数 .NET记录-获取外网IP以及判断该IP是属于网通还是电信 Guid的生成和数据修整（去除空格和小写字符）
- 关于div中放入一个img元素导致div高度会多出几个像素的解决问题
- 关于DIV高度自动伸展的问题
- 自定义viewgroup实现自动换行的布局，同时解决自定义布局在wrapcontent下高度不能自适应的问题，plus一些关于Component重写的基础知识
- 关于DIV高度自动伸展的问题
- 一个关于去除数组重复元素的问题（C语言实现）
- 关于处理Excel表中文字不能自动换行问题
- url 关于自动换行问题
- div高度自动撑大的问题（兼容ie和FF）
- 关于一个去除重复数组的问题
- 关于div高度自适应问题，兼容IE和火狐
- IE6的png显示问题以及div无法实现1px高度问题的解决
- 关于div行高的巨细问题(如何设置 div 的最小高度)