如何把两个div放在一起？

考虑下面的代码 ：

#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

浮动一个或两个内部的divs。

浮动一个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来包含浮动的孩子，或者它会认为它是空的，而不是把他们的边界

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

Answer 2

有两个div，

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

你也可以使用display属性：

 #div1 { display: inline-block; } #div2 { display: inline-block; } 

jsFiddle 这里的例子。

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

jsFiddle 这里的例子。

Answer 3

您可以通过使用CSS浮动属性来使元素彼此相邻：

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

你需要确保包装div允许在宽度上浮动，边距等正确设置。

Answer 4

这里是解决scheme：

 #wrapper { width: 500px; border: 1px solid black; overflow: auto; /* so the size of the wrapper is alway the size of the longest content */ } #first { float: left; width: 300px; border: 1px solid red; } #second { border: 1px solid green; margin: 0 0 0 302px; /* considering the border you need to use a margin so the content does not float under the first div*/ } 

你的演示更新;

http://jsfiddle.net/dqC8t/1/

Answer 5

选项1

在两个div元素上使用float:left ，为两个div元素设置一个宽度为100％的％宽度。

使用box-sizing: border-box; 浮动div元素上。 值边框强制填充和边框的宽度和高度，而不是扩大它。

在<div id="wrapper">上使用clearfix来清除浮动子元素，这会使包装div的比例缩放到正确的高度。

 .clearfix:after { content: " "; visibility: hidden; display: block; height: 0; clear: both; } #first, #second{ box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } #wrapper { width: 500px; border: 1px solid black; } #first { border: 1px solid red; float:left; width:50%; } #second { border: 1px solid green; float:left; width:50%; } 

http://jsfiddle.net/dqC8t/3381/

选项2

使用position:absolute一个元素的position:absolute ，另一个元素的固定宽度。

添加位置：相对于<div id="wrapper">元素，使子元素绝对地位于<div id="wrapper">元素。

 #wrapper { width: 500px; border: 1px solid black; position:relative; } #first { border: 1px solid red; width:100px; } #second { border: 1px solid green; position:absolute; top:0; left:100px; right:0; } 

http://jsfiddle.net/dqC8t/3382/

选项3

在div元素上使用display:inline-block ，并为两个div元素设置一个宽度为100％的％宽度。

再次（与float:left例子相同）使用box-sizing: border-box; 对div元素。 值边框强制填充和边框的宽度和高度，而不是扩大它。

注意：内嵌块元素可能会有间距问题，因为它受HTML标记中的空格影响。 更多信息在这里： https : //css-tricks.com/fighting-the-space-between-inline-block-elements/

 #first, #second{ box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } #wrapper { width: 500px; border: 1px solid black; position:relative; } #first { width:50%; border: 1px solid red; display:inline-block; } #second { width:50%; border: 1px solid green; display:inline-block; } 

http://jsfiddle.net/dqC8t/3383/

最后的select是使用名为flex的新显示选项，但是请注意浏览器的兼容性可能会出现：

http://caniuse.com/#feat=flexbox

http://www.sketchingwithcss.com/samplechapter/cheatsheet.html

Answer 6

尝试使用下面的代码更改将两个div放在彼此的前面

 #wrapper { width: 500px; border: 1px solid black; display:flex; } 

JSFiddle链接

Answer 7

尝试使用flexbox模型。 写起来简单而简短。

活Jsfiddle

CSS：

 #wrapper { display: flex; border: 1px solid black; } #first { border: 1px solid red; } #second { border: 1px solid green; } 

默认方向是排。 所以，它在#wrapper里相互靠近。 但它不支持IE9或更低的版本

Answer 8

1. 添加float:left; 财产在两个divs。

2. 添加display:inline-block; 属性。

3. 添加display:flex; 财产在父母div。

Answer 9

 #wrapper { width: 1200; border: 1px solid black; position: relative; float: left; } #first { width: 300px; border: 1px solid red; position: relative; float: left; } #second { border: 1px solid green; position: relative; float: left; width: 500px; } 

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