.像文本一样排block元素
.没有清除浮动等问题
.需要处理间隙
一种方式
<style> .container{ width: 800px; height: 200px; font-size: 0; /** * 使用inline-block,就相当于是文本,文字和文字之间肯定是有间隙的 * 不可能连在一起,不管是什么字体,所以这里要将文本设置为0 */ } .left{ font-size: 14px; background: red; display: inline-block; width: 200px; height: 200px; } .right{ font-size: 14px; background: blue; display: inline-block; width: 600px; height: 200px; } </style> <body> <div class="container"> <div class="left">左</div> <div class="right">右</div> </div> </body>
另一种处理方式
观察间隙的来源,他其实来自于html标记语言的空白
![](https://img2018.cnblogs.com/blog/331769/201902/331769-20190211174147750-1371440545.png)
如图,是这个间隙,一种写成这样
<div class="container"> <div class="left">左</div><div class="right">右</div> </div>
另外一种写成这样
<div class="container"> <div class="left">左</div><!-- --><div class="right">右</div> </div>
把标记语言的空白注释掉也是可以掉
但是因为这两种方式写起来都比较麻烦,所以一般还是使用字体的方式
* 缺陷:自适应的布局比较麻烦