如何將兩個div放在一起？

Question

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

我想兩個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來同時包含浮動孩子，或者它會認爲它是空的，並沒有把邊界他們周圍

浮動兩個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 */ 
} 

Answer 2

您可以通過使用CSS的float屬性坐在旁邊彼此元素：

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

你需要確保包裝DIV允許在寬度方面的浮動，以及利潤率等都是正確設置。

Answer 3

這裏是如此lution：

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

有兩個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例如here。

如果div1超過一定的高度，div2將被放置在旁邊的div1底部。要解決此問題，請使用div2上的vertical-align:top;。

jsFiddle example here。

Answer 5

選項1

在兩個div元件使用float:left並設置％的寬度爲100％的組合總寬度兩者div元素。

在浮動div元素上使用box-sizing: 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並設置％的寬度爲100％的組合總寬度兩者div元素。

再次（與float:left示例相同）在div元素上使用box-sizing: 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

Answer 6

嘗試使用下面的代碼更改來放置tw ○在彼此

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

JSFiddle link

Answer 7

嘗試的正面的div使用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. 兩個div的添加float:left;財產。

2. 添加display:inline-block;財產。

3. 在母公司div中添加display:flex;屬性。

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>