Html 如何将两个div并排放置？

How to place two divs next to each other?

提问by Misha Moroshko

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.

我希望两个 div 在包装 div 内彼此相邻。在这种情况下，绿色 div 的高度应确定包装器的高度。

How could I achieve this via CSS ?

我怎么能通过 CSS 实现这一点？

回答by clairesuzy

Float one or both inner divs.

浮动一个或两个内部 div。

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

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

或者如果你同时浮动，你需要鼓励包装 div 包含两个浮动的孩子，否则它会认为它是空的，而不是在它们周围放置边框

Floating both divs:

浮动两个div：

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

回答by jim_kastrin

Having two divs,

有两个div，

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

you could also use the displayproperty:

您还可以使用该display属性：

#div1 {
    display: inline-block;
}

#div2 {
    display: inline-block;
}

jsFiddle example here.

jsFiddle 示例在这里。

If div1exceeds a certain height, div2will be placed next to div1at the bottom. To solve this, use vertical-align:top;on div2.

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

jsFiddle example here.

jsFiddle 示例在这里。

回答by James

You can sit elements next to each other by using the CSS float property:

您可以使用 CSS float 属性将元素并排放置：

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

You'd need to make sure that the wrapper div allows for the floating in terms of width, and margins etc are set correctly.

您需要确保包装器 div 允许在宽度方面浮动，并且边距等设置正确。

回答by Md. Rafee

Try to use flexbox model. It is easy and short to write.

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

Live Jsfiddle

现场演奏

CSS:

CSS：

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

default direction is row. So, it aligns next to each other inside the #wrapper. But it is not supported IE9 or less than that versions

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

回答by meo

here is the solution:

这是解决方案：

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

your demo updated;

您的演示已更新；

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

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

回答by Jako Basson

Option 1

选项1

Use float:lefton both divelements and set a % width for both div elements with a combined total width of 100%.

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

Use box-sizing: border-box;on the floating div elements. The value border-box forces the padding and borders into the width and height instead of expanding it.

用于box-sizing: border-box;浮动 div 元素。值 border-box 强制填充和边框进入宽度和高度，而不是扩展它。

Use clearfix on the <div id="wrapper">to clear the floating child elements which will make the wrapper div scale to the correct height.

使用 clearfix<div id="wrapper">清除浮动子元素，这将使包装器 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/

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

Option 2

选项 2

Use position:absoluteon one element and a fixed width on the other element.

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

Add position:relative to <div id="wrapper">element to make child elements absolutely position to the <div id="wrapper">element.

添加 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/

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

Option 3

选项 3

Use display:inline-blockon both divelements and set a % width for both div elements with a combined total width of 100%.

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

And again (same as float:leftexample) use box-sizing: border-box;on the div elements. The value border-box forces the padding and borders into the width and height instead of expanding it.

再次（与float:left示例相同）box-sizing: border-box;在 div 元素上使用。值 border-box 强制填充和边框进入宽度和高度，而不是扩展它。

NOTE:inline-block elements can have spacing issues as it is affected by spaces in HTML markup. More information here: https://css-tricks.com/fighting-the-space-between-inline-block-elements/

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

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

A final option would be to use the new display option named flex, but note that browser compatibility might come in to play:

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

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

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

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

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

回答by Shailesh

Try to use below code changes to place two divs in front of each other

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

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

JSFiddle link

JSF 中间链接

回答by Runningman Studios

It is very easy - you could do it the hard way

这很容易 - 你可以用困难的方式做到

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

There's also like a million other ways.
But I'd just with the easy way. I would also like to tell you that a lot of the answers here are incorrect But both the ways that I have shown at least work in HTML 5.

还有一百万种其他方式。
但我只想用简单的方法。我还想告诉你，这里的很多答案都是不正确的，但我展示的两种方式至少在 HTML 5 中都有效。

回答by Martin Kraj?írovi?

This is the right CSS3 answer. Hope this helps you somehow now :D I really recommend you to read the book: https://www.amazon.com/Book-CSS3-Developers-Future-Design/dp/1593272863Actually I have made this solution from reading this book now. :D

这是正确的 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>

回答by Friend

1. Add float:left;property in both divs.

2. Add display:inline-block;property.

3. Add display:flex;property in parent div.

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

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

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