如何把两个女主角放在一起?

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实现这一点?

10 个解决方案

#1

Float one or both inner divs.

浮动一个或两个内部divs。

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

#2

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 display property:

你也可以使用显示属性:

#div1 {
    display: inline-block;
}

#div2 {
    display: inline-block;
}

jsFiddle example here.

jsFiddle例子。

If div1 exceeds a certain height, div2 will be placed next to div1 at the bottom. To solve this, use vertical-align:top; on div2.

如果div1超过一定的高度，则div2将放在底部div1的旁边。要解决这个问题，使用垂直对齐:顶部;div2。

jsFiddle example here.

jsFiddle例子。

#3

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允许按宽度和页边距等设置正确的浮动。

#4

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/

#5

Option 1

选项1

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

使用float:在两个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元素。边栏框的值将填充和边框压缩到宽度和高度，而不是展开它。

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来清除浮动子元素，它将使包装器扩展到正确的高度。

.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:absolute on one element and a fixed width on the other element.

使用位置:在一个元素上是绝对的，在另一个元素上是固定的宽度。

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

添加位置:相对于

元素，使子元素绝对位于

元素的位置。

#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-block on both div elements and set a % width for both div elements with a combined total width of 100%.

使用display:在两个div元素上都设置行块，并为两个div元素设置一个%的宽度，组合总宽度为100%。

And again (same as float:left example) 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相同:左示例)使用box- size: border-box;在div元素。边栏框的值将填充和边框压缩到宽度和高度，而不是展开它。

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

= flexbox http://caniuse.com/壮举

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

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

#6

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

尝试使用flexbox模型。写作很容易也很短。

Live Jsfiddle

住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

违约方向是行。因此，它在#包装器中相邻排列。但是它不支持IE9或者比那个版本更少

#7

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

JSFiddle链接

#8

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

   添加浮动:左;财产在两个div。

2. Add display:inline-block; property.

   添加显示:inline-block;财产。

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

   添加显示:flex;产权父div。

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

#10

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/1593272863 Actually I have made this solution from reading this book now. :D

这就是CSS3的正确答案。希望这对你有帮助:我真的推荐你去读这本书:https://www.amazon.com/bookcss3 - development - fudesign/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>