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

I want to make all divs side by side.

我想并排所有的div。

I mean remove the space form top of the #div3 and #div4.

我的意思是删除＃div3和＃div4顶部的空格。

I tried float and display:inline-block

我试过浮动并显示：内联块

my code :

我的代码：

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

3 个解决方案

#1

One solution is to use flex in the parent container:

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

#2

vertical-align: top;

to each div1, 2, 3 and 4

每个div1,2,3和4

you can add this to affect all divs on the page

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

div {
    vertical-align: top;
}

or this for all divs within #wrapper div

或者这对于#wrapper div中的所有div

#wrapper div {
    vertical-align: top;
}

or this to target each div you want ( 1-4 )

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

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

or to each one individually, or inline style and so on.

或单独或内联风格等。

#3

You just need to add

你只需要添加

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

This will work perfectly. Also do not forget to clear the float after

这将完美地工作。也不要忘记清除漂浮后

#1