为什么“Inline-block”在这个 CSS 中不能正常工作？

请检查下面的 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;
}

The result in browser:

我需要的：

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

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

工作演示 http://jsfiddle.net/afave/2/

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

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

如何删除内联块元素之间的空格？ https://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements