如何把两块硬币放在一起？

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实现这一点？

Answer 1

浮动一个或两个内部div。

浮动1 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 */}

Answer 2

通过使用CSS Float属性，您可以将元素放在一起：

#first {float: left;}#second {float: left;}

您需要确保包装器div允许浮动宽度，并正确设置边距等。