如何让下来的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>