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

我想把两个div并排放在一个容器里，多亏了这么多，我觉得我就快到了，但有些事情我真的不明白

html如下所示：

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

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才能考虑空白。显示设置为内联块（我宁愿使用显示而不是浮动）

这个很好用。当我将内容添加到左侧和右侧块时，它会继续工作。然而，当我只向一个块添加内容时，这个块会奇怪地从顶部偏移。这就像增加了利润上限：50px或其他什么。我不明白为什么

下面是内容位于左侧块中的JSFIDLE：

我还尝试了overflow:hidden，但这会缩小包含内容的块

任何帮助都将不胜感激！如果有人能告诉我这里发生了什么，那就太好了

非常感谢

将此添加到css中

#left, #right{float:left;}

---

看看这本关于Flexbox的非常好的指南。如今，这是构建布局最清晰的方法

---

一种方法是使用flexbox。请注意flexbox的名称，并使用前缀

.parent {
   display: flex;
}

这将有助于：

.font {
    font-size: 16px;
    vertical-align: top;
}

默认情况下，基线是垂直对齐的。如果

为空，则其底线将是其基线。否则，第一行文本的基线就是要对齐的基线

---

即使两个

中都有单词，但字体大小不同，也存在此问题。

或者，您可以使用CSS表。你的加价很适合这项技术

主要的优点是，您不必改变字体大小来补偿内联块之间可能出现的空白

话虽如此，这两种方法都适用于您的情况

正文{
保证金：0；
}
.家长{
显示：表格；
宽度：100%；
高度：40px；
}
#左，#右{
显示：表格单元格；
垂直对齐：顶部；
宽度：50%；
身高：100%；
}
#左{
背景：浅蓝色；
}
#对{
背景：橙色；
}

左蓝
右橙色

我必须在

.parent上添加
宽度：100%
，这样才能在我的情况下起作用，如果这对某人有帮助的话。