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

一种解决方案是在父容器中使用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>

Answer 2

vertical-align: top;

到每个div1,2,3和4

你可以添加它来影响页面上的所有div

div {
    vertical-align: top;
}

或#wrapper div中的所有div

#wrapper div {
    vertical-align: top;
}

或者这个目标是你想要的每个div（1-4）

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

或单独或内联样式等。

Answer 3

你只需要添加

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

这将完美地运作。另外不要忘记在

之后清除浮动

如何让down div与其他div一起上升

3 个答案: