如何将两个div放在一起？ [英] How to place two divs next to each other?

问题描述

请考虑以下代码：

  #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适用于专业和爱好者的程序员，因为他们喜欢编写代码的人。< / div> < div id =second>当您发布新问题时，其他用户几乎会立即看到它，并尝试提供好的答案。这通常会在几分钟内发生，因此，当您的问题仍然是最新回复时，请务必经常检查。< / div>< / div>  

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

如何通过CSS实现这一点？

浮动一个div： / p>

  #wrapper {
 width：500px; 
 border：1px solid black; 
 overflow：hidden; / *将包含如果#first超过#second * / 
} 
 #first {
 width：300px; 
 float：left; / * add this * / 
 border：1px solid red; 
} 
 #second {
 border：1px solid green; 
 overflow：hidden; / *如果你不想#second包装在下面#first * / 
} 
  

如果你同时浮动两个，你需要鼓励包装器div包含两个浮动的孩子，否则它会认为它是空的， > 浮动两个div：

  #wrapper {
 width：500px; 
 border：1px solid black; 
 overflow：hidden; / *添加这个包含浮动的孩子* / 
} 
 #first {
 width：300px; 
 float：left; / * add this * / 
 border：1px solid red; 
} 
 #second {
 border：1px solid green; 
 float：left; / * add this * / 
} 
  

Consider the following code:

#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>

I would like the two divs to be next to each other inside the wrapper div. In this case, the height of the green div should determine the height of the wrapper.

How could I achieve this via CSS ?

解决方案

Float one or both inner divs.

Floating one 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 */
}

or if you float both, you'll need to encourage the wrapper div to contain both the floated children, or it will think it's empty and not put the border around them

Floating both divs:

#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 */
}

这篇关于如何将两个div放在一起？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！