CSS样式之实现水平排列块元素的几种方式

三种实现水平排列块元素的方式

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源代码中的换行符被渲染成了空白符。

两种方法可以消除：

1. 源代码中标签之间不适用换行符，但这种方式对开发者不友好。
2. 把包含元素的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>

在这里插入图片描述

三种方法优缺点比较

1. 浮动 与行内块一样，可以包装多行文本。浮动也会根据自己的内容来“收缩适应”。浮动的包含与清除，有时会很麻烦。另一方面，浮动可以不依赖元素在代码中的次序。
2. 行内块 有空白符的问题，但也是可以解决的，不过要注意继承的问题。也存在“收缩适应”。
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>
    <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>

在这里插入图片描述