为什么＆＃34;内联块＆＃34;在这个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中的预期行为。因为您使用的是内联块，所以在元素之后和另一个内联元素之前的任何换行符或空格都将被计为空格。如果你希望块像你的图片一样并排堆叠，你的HTML就需要像这样。

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

working demo

它不是很漂亮，但是我再推荐使用另一种方法，可能会浮动元素。

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

How to remove the space between inline-block elements?

Answer 2

在这里延伸@Tristan的答案。

您不必要地重复了css代码。你可以使用多个css来缩小它，如：

.ex, .ex2, .ex3 {
    display: inline-block;
    vertical-align: top;
    margin: 0;
    padding: 0;
    height: 100%;  /* no need of height: 200px; here */
}                  /* if you need to extend it to parent height */
                   /* then use height: 100% */

或

div.rex > div { /* code here */ }

您可以使用以下任何一种方法并排保留元素：

• Using display: table-cell

• Using float: left

• 使用display：inline-block（ check @Tristan's solution ）

Answer 3

将float:left;添加到div.ex，div.ex2和div.ex3。

JSFIDDLE

更新： 如果position:absolute不可选，请将float添加到第二和第三个div。

FIDDLE

更新2： 如果你需要这个空间，只将它添加到第3个div。

FIDDLE

Answer 4

我的诀窍是设置font-size：0;在父元素中，因为它的字体大小导致数学不能完美地加起来（每个div大约4px重叠，具体取决于屏幕大小）并导致一个div出现在另一个下面。

.rex{
display:block;
font-size:0;
}

.ex{
width:34%;
height:200px;
background-color:#4f443a;
display:inline-block;
vertical-align:top;
margin: 0 .5% 0 0; /*small space between divs*/
padding: 0;
font-size:16px; /*restore font size*/
}

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

Answer 5

你可以起诉这样的评论（在代码中看起来好一点）：

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