如何将两个div并排放置？

Question

如何将两个div并排放置？

463

考虑以下代码：链接

#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的高度应决定包裹div的高度。

我该如何使用CSS实现这一点？

- Misha Moroshko

5

另外：https://dev59.com/jHRB5IYBdhLWcg3w-8Ho - radek

34

#wrapper { display: flex; } 可以翻译为： #wrapper { 显示：弹性; }。 - icl7126

13个回答

170

如果有两个

，你也可以使用display属性：

#wrapper {
    border: 1px solid blue;
}
#div1 {
    display: inline-block;
    width:120px;
    height:120px;
    border: 1px solid red;
}
#div2 {
    display: inline-block;
    width:160px;
    height:160px;
    border: 1px solid green;
}

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

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

#wrapper {
    border: 1px solid blue;
}
#div1 {
    display: inline-block;
    width:120px;
    height:120px;
    border: 1px solid red;
}
#div2 {
    vertical-align:top;
    display: inline-block;
    width:160px;
    height:160px;
    border: 1px solid green;
}

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

示例1的jsFiddle演示。

示例2的jsFiddle演示。

- jim_kastrin

@BSeven 接受的答案使用了 float 属性，这个属性在主要的浏览器中比 display 属性更早得到支持。Chrome 浏览器从 v1.0 开始支持 float 属性，而从 v4.0 开始支持 display 属性。也许当时编写这个答案时，这种回答更具有向后兼容性。 - jim_kastrin

5

这种解决方案存在一个令人烦恼的问题：由于将 div 设为 inline，因此在 HTML 中它们之间不能有空格、换行等字符。否则，浏览器会在它们之间渲染出一个空格。请参见此 Fiddle：除非在它们的标签之间不加任何字符，否则无法使这两个 div 处于同一行。 - Alexander Abakumov

39

您可以使用CSS浮动属性将元素并排放置:

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

你需要确保包裹的 div 标签在宽度和边距等方面允许浮动。

- James

35

尝试使用flexbox模型，它易于编写且简短。

Live Jsfiddle

CSS：

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

默认方向是行。因此，它们在#wrapper内部彼此对齐。但是，它不支持IE9或版本低于IE9的浏览器。

- Md Rafee

20

选项1

在两个

元素上使用float:left，并为这两个

元素设置一个百分比宽度，使它们的总宽度为100%。

在浮动

元素上使用box-sizing: border-box;。值border-box将填充和边框强制转换为宽度和高度，而不是将其扩展。

在<div id="wrapper">上使用clearfix来清除浮动的子元素，这将使包装器

按比例缩放到正确的高度。

.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:relative到<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示例相同），在div元素上使用box-sizing:border-box;。值border-box将填充和边框强制纳入宽度和高度中，而不是扩展它。

注意： inline-block元素可能存在间距问题，因为它受到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

- Jako Basson

1

同意；float不是我的菜。inline-block很棒。（抱歉。） - SteveCinq

17

这里是解决方案：

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

- meo

谢谢。如果我省略 overflow: auto;，它仍然可以工作。你能给一个需要它的例子吗？ - Misha Moroshko

没问题：移除overflow:auto并使第一个内容比第二个内容更长，你会发现容器的大小只有在你设置了overflow:auto或者使用了清除元素时才会自适应。请参考以下链接：http://jsfiddle.net/dqC8t/3/ - meo

好的，我明白了，谢谢！不过，我不喜欢 margin: 0 0 0 302px; 因为它依赖于 width: 300px;。但是，无论如何还是谢谢！！ - Misha Moroshko

如果您为第二个div指定宽度，则不需要它。 - meo

10

这是正确的 CSS3 解答。希望它能在某种程度上帮助你：D

我真的建议你阅读这本书：https://www.amazon.com/Book-CSS3-Developers-Future-Design/dp/1593272863 实际上，我现在就是通过阅读这本书来得到这个解决方案的。：D

#wrapper{
  display: flex;
  flex-direction: row;
  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>

- Martin Krajčírovič

10

这很容易 - 你可以采取困难的方式

.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%;
}

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

or the easy way

#wrapper {
  display: flex;
  border: 1px solid black;
}
#first {
    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>

还有许多其他方法。
但我会选择简单的方式。我还想告诉你，这里很多答案是不正确的，但是我展示的两种方法至少在 HTML 5 中起作用。

- NotAFlyingGoose

9

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

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

JSFiddle link

- Shailesh

7

在两个div中都添加float:left;属性。
添加display:inline-block;属性。
在父div中添加display:flex;属性。

- Friend

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- clairesuzy · Accepted Answer

浮动一个或两个内部div。

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

如果你将两个元素都浮动，那么你需要让包含它们的父级

元素来包裹这两个浮动元素，否则父级元素会认为是空的，并且无法在其周围绘制边框。

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