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

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&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;500px; &nbsp;&nbsp;&nbsp;&nbsp;border:&nbsp;1px&nbsp;solid&nbsp;black; &nbsp;&nbsp;&nbsp;&nbsp;overflow:&nbsp;hidden;&nbsp;/*&nbsp;will&nbsp;contain&nbsp;if&nbsp;#first&nbsp;is&nbsp;longer&nbsp;than&nbsp;#second&nbsp;*/}#first&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;300px; &nbsp;&nbsp;&nbsp;&nbsp;float:left;&nbsp;/*&nbsp;add&nbsp;this&nbsp;*/ &nbsp;&nbsp;&nbsp;&nbsp;border:&nbsp;1px&nbsp;solid&nbsp;red;}#second&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;border:&nbsp;1px&nbsp;solid&nbsp;green; &nbsp;&nbsp;&nbsp;&nbsp;overflow:&nbsp;hidden;&nbsp;/*&nbsp;if&nbsp;you&nbsp;don't&nbsp;want&nbsp;#second&nbsp;to&nbsp;wrap&nbsp;below&nbsp;#first&nbsp;*/}或者，如果两者都浮动，则需要鼓励包装器div同时包含两个浮动子程序，否则它会认为它是空的，而不是将边框放在它们周围。浮动两个div：#wrapper&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;500px; &nbsp;&nbsp;&nbsp;&nbsp;border:&nbsp;1px&nbsp;solid&nbsp;black; &nbsp;&nbsp;&nbsp;&nbsp;overflow:&nbsp;hidden;&nbsp;/*&nbsp;add&nbsp;this&nbsp;to&nbsp;contain&nbsp;floated&nbsp;children&nbsp;*/}#first&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;300px; &nbsp;&nbsp;&nbsp;&nbsp;float:left;&nbsp;/*&nbsp;add&nbsp;this&nbsp;*/ &nbsp;&nbsp;&nbsp;&nbsp;border:&nbsp;1px&nbsp;solid&nbsp;red;}#second&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;border:&nbsp;1px&nbsp;solid&nbsp;green; &nbsp;&nbsp;&nbsp;&nbsp;float:&nbsp;left;&nbsp;/*&nbsp;add&nbsp;this&nbsp;*/}

Answer 2

通过使用CSS Float属性，您可以将元素放在一起：#first&nbsp;{float:&nbsp;left;}#second&nbsp;{float:&nbsp;left;}您需要确保包装器div允许浮动宽度，并正确设置边距等。