如何讓下來的div上沿其他div

Question

我想使所有div並排。

我的意思是除去#div3和#div4頂部的空格。

我試圖float和display:inline-block

我的代碼：

<div id="wrapper"> 
    <div id="div1">The first</div> 
    <div id="div2">next to each other.</div> 
    <div id="div3">The two divs are</div> 
    <div id="div4">The two divs are</div> 
</div> 
#div1 { 
    display: inline-block; 
    width:220px; 
    height:120px; 
    border: 1px solid red; 
} 
#div2 { 
    display: inline-block; 
    width:260px; 
    height:260px; 
    border: 1px solid green; 
} 
#div3 { 
    display: inline-block; 
    width:100px; 
    height:160px; 
    border: 1px solid green; 
} 
#div4 { 
    display: inline-block; 
    width:100px; 
    height:160px; 
    border: 1px solid green; 
} 

http://jsfiddle.net/u5y6tuwm/

Answer 1

vertical-align: top; 

每個DIV1，2，3和4

您可以添加此影響所有div的頁面

div { 
    vertical-align: top; 
} 

或本作#wrapper指定專區內的所有div

#wrapper div { 
    vertical-align: top; 
} 

或這個目標每個div都想要（1-4）

#div1, #div2, #div3, #div4 { 
    vertical-align: top; 
} 

，或者每一個單獨，或內聯樣式等等。

Answer 2

你只需要添加

#div1, #div2, #div3, #div4 { 
    float:left; 
} 

這將很好地工作。也不要忘記清除浮動後

Answer 3

一種解決方案是在父容器使用flex：

#wrapper { 
 
    display: flex; 
 
    /*set display to flex*/ 
 
    margin-top: 20px; 
 
} 
 
#wrapper > div { 
 
    margin-right: 10px; 
 
    /*add some margin to the right to direct children div*/ 
 
} 
 
#div1 { 
 
    width: 220px; 
 
    height: 120px; 
 
    border: 1px solid red; 
 
} 
 
#div2 { 
 
    width: 260px; 
 
    height: 260px; 
 
    border: 1px solid green; 
 
} 
 
#div3 { 
 
    width: 100px; 
 
    height: 160px; 
 
    border: 1px solid green; 
 
} 
 
#div4 { 
 
    width: 100px; 
 
    height: 160px; 
 
    border: 1px solid green; 
 
}

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