构造其实就是想步伐怎样将一些元素横向的摆列起来，纵向由于块级元素的存在会自动占据一行。

inline-block 元素会占据一行而且可以调解宽高很适合将这些元素摆列在一行，而且使用 inline-block 元素摆列没有断根浮动这样的问题。

但是，使用 inline-block 构造两个元素之间会有一个空白间隙，下面一起来看一下。

html代码

<div class="container"> <div class="left"> left </div> <div class="right"> right </div> </div>

css 代码

.container { width: 800px; height: 200px; /*font-size: 0;*/ } .left { /*font-size: 14px;*/ background-color: red; display: inline-block; width: 200px; height: 200px; } .right { /*font-size: 14px;*/ background-color: blue; display: inline-block; width: 600px; height: 200px; }

功效如下：

按原理说，container 的宽度正好即是 left 和 right 的宽度之和，应该并列在一起，但是没有，此刻我们减小一些 right 的宽度，将 right 的宽度设置为 500 px，功效如下

会发明中间有一个空白的间隙，这是为什么呢？

因为此刻使用的是 inline-block 元素，为了便利理解，可以将 inline-block 元素当作是两个文字，文字与文字之间不成能是连在一起的，必定是有间隙的。

既然知道了是文字的问题，那我们就将父元素 container 的字体巨细设置为 0，可是这个时候会发明 left 和 right 这两个单词也没有了，这是因为 left 和 right 元素担任了父级元素的字体巨细，这时候我们只需要分袂设置 left 和 right 元素的字体巨细即可。

将 css 代码改削如下

.container { width: 800px; height: 200px; font-size: 0; /* 新增 */ } .left { font-size: 14px; /* 新增 */ background-color: red; display: inline-block; width: 200px; height: 200px; } .right { font-size: 14px; /* 新增 */ background-color: blue; display: inline-block; width: 600px; height: 200px; }

功效如下

上面是一种要领，，下面可以从 html 代码的角度来解决这个问题。

引起上面间隙的根来源根底因是由于 left 元素和 right 元素代码之间不是紧挨着的导致中间有间隙，可以将 html 代码改成下面这样：

<div class="container"> <div class="left"> left </div><div class="right"> right </div> </div> <!-- 或操作注释的方法 --> <div class="container"> <div class="left"> left </div><!-- --><div class="right"> right </div> </div>

功效如下

完，后续还会总结一下flex构造，float构造，table 表格构造等 CSS 构造方法。
如有不得当之处，欢迎斧正哦.

CSS构造方法--inline-block 构造