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

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>