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;
}

font-size需要为0才能占用空格。 display设置为inline-block（我宁愿使用display而不是float）。

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

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

我也尝试过overflow：hidden，但是会缩小内容块。

任何帮助将不胜感激！如果有人可以向我解释这里发生了什么，那真的很棒！

非常感谢！

Answer 1

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

.parent {
   display: flex;
}

Answer 2

在css中添加此内容

#left, #right{float:left;}

Answer 3

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

主要优点是您不必更改字体大小以补偿内嵌块之间可能出现的空白区域。

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

＆＃13;

body {
  margin: 0;
}
.parent {
  display: table;
  width: 100%;
  height: 40px;
}
#left, #right {
  display: table-cell;
  vertical-align: top;
  width: 50%;
  height: 100%;
}
#left {
  background: lightblue;
}
#right {
  background: orange;
}

＆＃13;

<div class="parent">
  <div class="font" id="left">Left Blue</div>
  <div class="font" id="right">Right Orange</div>
</div>

＆＃13;

Answer 4

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

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 5

这将有效：

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

默认情况下，基线是垂直对齐的。如果<div>为空，则其底线将是其基线。否则，第一行文本的基线是要与之对齐的基线。

即使两个<div>中都有单词但font-size s不同，也存在此问题。

2个并排，每个50％，相同的高度

5 个答案: