html - 为什么 "Inline-block"在此 CSS 中不能正常工作？

Question

请检查下面的 CSS。

 /*rex is the container of ex,ex2,ex3*/
div.rex{
height:200px;
border:0px;
margin:60px auto;
padding: 0;
vertical-align:top;
}

div.ex{
width:34%;
height:200px;
background-color:#4f443a;
display:inline-block;
margin: 0;
padding: 0;
vertical-align:top;
}

div.ex2{
width:0.5%;
height:200px;
display:inline-block;
margin: 0;
padding: 0;
vertical-align:top;
}


div.ex3{
width:65.5%;
height:200px;
background-color:#7e8547;
display:inline-block;
margin: 0;
padding: 0;
vertical-align:top;
}

在浏览器中的结果:

我需要什么:

Answer 1

这实际上是 HTML 中的预期行为。因为您使用的是内联 block ，所以在元素之后和另一个内联元素之前的任何换行符或空格都将被计为空格。如果您希望 block 像图片中那样并排堆叠，您的 HTML 需要像这样。

<div class="rex">
    <div class="ex"></div><div class="ex2"></div><div class="ex3"></div>
</div>

working demo

它不是很漂亮，但话又说回来，我建议使用另一种方法，可能改为 float 元素。

请参阅此处以更深入地解释为什么会发生这种情况。

How to remove the space between inline-block elements?