如何将两个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实现呢？

---

#1楼

有两个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示例在这里 。

---

#2楼

选项1

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

使用box-sizing: border-box; 在浮动div元素上。 值border-box会将填充和边框强制为宽度和高度，而不是对其进行扩展。

在<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在一个元素上，固定宽度在另一个元素上。

向<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元素上。 值border-box会将填充和边框强制为宽度和高度，而不是对其进行扩展。

注意：内联块元素可能会存在间距问题，因为它受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/

最后一个选择是使用名为flex的新显示选项，但请注意，浏览器兼容性可能会发挥作用：

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

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

---

#3楼

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

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

JSFiddle链接

---

#4楼

尝试使用flexbox模型。 它很容易写。

Live Jsfiddle

CSS：

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

默认方向是行。 因此，它在#wrapper中彼此对齐。 但是不支持IE9或更低版本

---

#5楼

1. 添加float:left; 两个div中的属性。

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

3. 添加display:flex; 父div中的属性。

来源：oschina

链接：https://my.oschina.net/stackoom/blog/3188705