html:
<div class="container">
<div class="col">
1111
</div>
<div class="col">
2222
</div>
<div class="col">
3333
</div>
<div>
css:
.container {
width: 1200px;
margin: 0 auto;
}
.col {
width: 33.33%;
display: inline-block;
}
结果:
理想中是显示在一行中,事实却是两行。
原因是因为: col元素 display: inline-block后,元素后面的换行符以及空格都会被算上宽度,所以会溢出。
两种解决方法:
1. .col加上float: left.
2. .container加上font-size: 0.