我想将两个 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 。
任何帮助将不胜感激!另外,如果有人能向我解释这里发生了什么,那就太好了!
非常感谢!
最佳答案
一种方法是使用 flexbox。 Codepen example .注意 support对于 flexbox 并使用前缀。
.parent {
display: flex;
}
关于html - 2个并排的div,每个50%,高度相同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29576576/