html - 2个并排的div，每个50%，高度相同

Question

我想将两个 div 并排放置在一个容器中，并且 - 感谢 SO - 我觉得我快到了，但有些东西我真的不明白。

html 看起来像这样:

<div class="parent">    
 <div class="font" id="left"></div>
 <div class="font" id="right"></div>
</div>

CSS 看起来像这样:

body {
    margin: 0;
}
#left {
    width: 50%;
    background: lightblue;
    display: inline-block;
    height: 100%;
}
#right {
    width: 50%;
    background: orange;
    display: inline-block;
    height: 100%;
}
.parent{
    font-size:0;
    margin: 0;
    height: 40px;
}
.font{
    font-size:16px;
}

字体大小需要为 0 以说明空格。 display 设置为 inline-block(我宁愿使用 display 而不是 float)。

这很好用。当我将内容添加到 左侧和右侧 block 时，它会继续工作。但是，当我只将内容添加到一个 block 时，这个 block 会奇怪地从顶部偏移。这就像添加 margin-top: 50px 什么的。我不明白为什么。

这是左侧 block 中包含内容的 JSFiddle:https://jsfiddle.net/dave_s/phon1tws/

我也试过 overflow:hidden，但它会缩小包含内容的 block 。

任何帮助将不胜感激!另外，如果有人能向我解释这里发生了什么，那就太好了!

非常感谢!

Answer 1

一种方法是使用 flexbox。 Codepen example .注意 support对于 flexbox 并使用前缀。

.parent {
   display: flex;
}