如何在css中创建divs行

Question

我想创建一个rowise块，即

---

| | DIV2 | | div1 | div3 | | _______ | DIV4 |

但是当我尝试这个'div2'低于'div1'时我试过显示rowise div_container也包含所有div1，div2，div3，div4但它不起作用 我的HTML代码

#div_container
{
  height:325 px;
  width:600px;
  border-style: solid;
}
#div1
{
  height:325px;
  width:400px;
  border-style: solid;
}
#div2
{
  height:108px;
  width:200px;
  border-style: solid;
}
#div3
{
  height:108px;
  width:200px;
  border-style: solid;
}#div4
{
  height:108px;
  width:200px;
  border-style: solid;
}

<div id="div_container">
  <div id="div1">
    </div>
  <div id="div2">
    </div>
  <div id="div3">
    </div>
  <div id="div4">
    </div>
</div>

请建议我 先谢谢你了

Answer 1

在容器div中添加新的display属性必须诀窍

#div_container
{
    height:325 px;
    width:600px;
    border-style: solid;
    display:inline-flex;
}

Answer 2

只需将display：inline-block添加到内部div

即可

的CSS：

 #div_container>div{
    display:inline-block;

} 

jsfiddle：http://jsfiddle.net/swapnilmotewar/38aamh8v/1/

Answer 3

I have updated only the width of div_container (because you have applied the border and given fixed width that is 600px for main container and 400 for your div1 so div unable to take space or just remove the border) and applied the "display:inline-block;" for sub elements (div). please check jsfiddle example.

jsfiddle link

Answer 4

添加属性显示：并为其赋值inline-flex它将起作用

#div_container
{
    display:inline-flex;
}