如何将两个 div 并排放置？

Question

考虑 以下代码：

 #wrapper {
    width: 500px;
    border: 1px solid black;
}
#first {
    width: 300px;
    border: 1px solid red;
}
#second {
    border: 1px solid green;
}

 <div id="wrapper">
    <div id="first">Stack Overflow is for professional and enthusiast programmers, people who write code because they love it.</div>
    <div id="second">When you post a new question, other users will almost immediately see it and try to provide good answers. This often happens in a matter of minutes, so be sure to check back frequently when your question is still new for the best response.</div>
</div>

我希望这两个 div 在包装 div 中彼此相邻。在这种情况下，绿色 div 的高度应该决定包装器的高度。

我怎样才能通过 CSS 实现这一目标？

原文由 Misha Moroshko 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

浮动一个或两个内部 div。

浮动一个div：

 #wrapper {
    width: 500px;
    border: 1px solid black;
    overflow: hidden; /* will contain if #first is longer than #second */
}
#first {
    width: 300px;
    float:left; /* add this */
    border: 1px solid red;
}
#second {
    border: 1px solid green;
    overflow: hidden; /* if you don't want #second to wrap below #first */
}

或者如果你同时浮动，你需要鼓励包装器 div 包含两个浮动的孩子，否则它会认为它是空的并且不会在它们周围放置边框

浮动两个 div：

 #wrapper {
    width: 500px;
    border: 1px solid black;
    overflow: hidden; /* add this to contain floated children */
}
#first {
    width: 300px;
    float:left; /* add this */
    border: 1px solid red;
}
#second {
    border: 1px solid green;
    float: left; /* add this */
}

原文由 clairesuzy 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

有两个 div，您还可以使用 display 属性：

 #wrapper {
    border: 1px solid blue;
}
#div1 {
    display: inline-block;
    width:120px;
    height:120px;
    border: 1px solid red;
}
#div2 {
    display: inline-block;
    width:160px;
    height:160px;
    border: 1px solid green;
}

 <div id="wrapper">
    <div id="div1">The two divs are</div>
    <div id="div2">next to each other.</div>
</div>

如果 div1 超过一定高度， div2 将被放置在底部 div1 旁边。要解决此问题，请在 --- vertical-align:top; div2 。

 #wrapper {
    border: 1px solid blue;
}
#div1 {
    display: inline-block;
    width:120px;
    height:120px;
    border: 1px solid red;
}
#div2 {
    vertical-align:top;
    display: inline-block;
    width:160px;
    height:160px;
    border: 1px solid green;
}

 <div id="wrapper">
    <div id="div1">The two divs are<br/><br/><br/><br/><br/><br/></div>
    <div id="div2">next to each other.</div>
</div>

jsFiddle 例如 1 。

jsFiddle 例如 2 。

原文由 jim_kastrin 发布，翻译遵循 CC BY-SA 4.0 许可协议