三种实现水平排列块元素的方式
1. 使用浮动定位(float)
.cellDiv
{
height:300px;
/*display:table-cell;*/
float:left;
/*display:inline-block;*/
border:1px solid orange;
}
<div class = "cellDiv">
你好1
</div>
<div class = "cellDiv">
你好2
</div>
<div class = "cellDiv">
你好3
</div>
当我们不给块设置固定大小时,对块级元素设置浮动布局,浮动后,行内块的宽度会收缩适应于其中内容的最小宽度。
2. 行内块(inline-block)
.cellDiv
{
width:300px;
height:300px;
/*display:table-cell;*/
/*float:left;*/
display:inline-block;
border:1px solid orange;
}
可以实现水平布局,但是会发现一个问题,就是两个块级标签之间存在空隙。
这是因为,HTML源代码中的换行符被渲染成了空白符。
两种方法可以消除:
- 源代码中标签之间不适用换行符,但这种方式对开发者不友好。
- 把包含元素的font-size设置为0
.cellDiv
{
width:300px;
height:300px;
/*display:table-cell;*/
/*float:left;*/
display:inline-block;
font-size:16px;
border:1px solid orange;
}
.container
{
font-size:0;
}
<div class = "container">
<div class = "cellDiv">
你好1
</div>
<div class = "cellDiv">
你好2
</div>
<div class = "cellDiv">
你好3
</div>
</div>
注意
由于CSS中存在着继承机制,因此当我们给父元素设置样式时,若子元素没有设置相同样式,则子元素会继承父元素的样式。比如上面的font-size. 我们给父元素设置为0,若子元素不设置font-size的大小,则会继承父元素的值,即0.
3. 表格显示属性
.cellDiv
{
width:300px;
height:300px;
display:table-cell;
/*float:left;*/
/*display:inline-block;*/
/*font-size:16px;*/
border:1px solid orange;
}
<div class = "cellDiv">
你好1
</div>
<div class = "cellDiv">
你好2
</div>
<div class = "cellDiv">
你好3
</div>
三种方法优缺点比较
- 浮动 与行内块一样,可以包装多行文本。浮动也会根据自己的内容来“收缩适应”。浮动的包含与清除,有时会很麻烦。另一方面,浮动可以不依赖元素在代码中的次序。
- 行内块 有空白符的问题,但也是可以解决的,不过要注意继承的问题。也存在“收缩适应”。
- 表格显示模式 很方便,但仅支持不会发生折行的内容。也就是说,当使用表格显示模式时,若是内容较多,不会发生折行,会使每个元素的发生收缩,即使设置了元素的宽度。且这种方式也有着表格存在的问题,如不能设置外边距等。
.cellDiv
{
width:300px;
height:300px;
display:table-cell;
/*float:left;*/
/*display:inline-block;*/
/*font-size:16px;*/
border:1px solid orange;
}
<div class = "cellDiv">
你好1
</div>
<div class = "cellDiv">
你好2
</div>
<div class = "cellDiv">
你好3
</div>
<div class = "cellDiv">
你好1
</div>
<div class = "cellDiv">
你好2
</div>
<div class = "cellDiv">
你好3
</div>
<div class = "cellDiv">
你好1
</div>
<div class = "cellDiv">
你好2
</div>
<div class = "cellDiv">
你好3
</div>
<div class = "cellDiv">
你好1
</div>
<div class = "cellDiv">
你好2
</div>
<div class = "cellDiv">
你好3
</div>
<div class = "cellDiv">
你好1
</div>
<div class = "cellDiv">
你好2
</div>
<div class = "cellDiv">
你好3
</div>
<div class = "cellDiv">
你好1
</div>
<div class = "cellDiv">
你好2
</div>
<div class = "cellDiv">
你好3
</div>