Html 为什么“内联块”在此 CSS 中无法正常工作？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22397479/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why "Inline-block" doesn't work properly in this CSS?
提问by JUST16
Please check the CSS below.
请检查下面的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:
浏览器中的结果：
What I need:
我需要的：
回答by Tristan
This is actually expected behavior in HTML. Because you are using inline-block, any newline character or whitespace you have after the element and before another inline element, will be counted as a space. If you want the blocks to stack side by side like in your picture, your HTML would need to be like this.
这实际上是 HTML 中的预期行为。由于您使用的是内联块，因此元素之后和另一个内联元素之前的任何换行符或空格都将被视为空格。如果您希望块像图片中一样并排堆叠，则您的 HTML 需要像这样。
<div class="rex">
<div class="ex"></div><div class="ex2"></div><div class="ex3"></div>
</div>
It's not very pretty, but then again, I would recommend using another approach, possibly floating the elements instead.
它不是很漂亮，但话又说回来，我建议使用另一种方法，可能改为浮动元素。
Refer to here for a more in depth explanation of why this occurs.
请参阅此处以更深入地解释发生这种情况的原因。
回答by Mr_Green
Just extending answer giving by @Tristan here.
只是在这里扩展@Tristan 给出的答案。
You have repeated the css code unnecessarily. You can minify it by using multiple css like :
您不必要地重复了 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% */
OR
或者
div.rex > div { /* code here */ }
You can keep elements side by side by using any of the below approaches:
您可以使用以下任何一种方法并排放置元素：
Using display: inline-block (check @Tristan's solution)
使用 display: inline-block （检查@Tristan 的解决方案）
回答by Squivo
My trick is to set font-size:0; in the parent element, because it's the font-size that is causing the math to not add up perfectly ( about a 4px overlap per div, depending on screen size ) and causes one div to appear under the other.
我的诀窍是设置 font-size:0; 在父元素中，因为字体大小导致数学不能完美地累加（每个 div 大约有 4px 重叠，具体取决于屏幕大小）并导致一个 div 出现在另一个 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;
}
回答by Bartek Qoster
You can sue comments like that (this looks little better in code):
你可以起诉这样的评论（这在代码中看起来好一点）：
<div class="rex">
<div class="ex"><!--
--></div><div class="ex2"></div><!--
--><div class="ex3"></div>
</div>
回答by Fr0zenFyr
Add float:left;to your div.ex, div.ex2and div.ex3instead.
添加float:left;到您的div.ex,div.ex2而div.ex3不是。
UPDATE:
Add position:absoluteto second and third div if floatis not a choice.
更新：position:absolute如果float不是选择，则添加到第二个和第三个 div 。
UPDATE 2: Add this to only 3rd div if you need that space in between.
更新 2：如果您需要它们之间的空间，请将其添加到第 3 个 div。
