如何在css中按行创建div答案

【问题标题】：how to create divs rowwise in css如何在css中按行创建div
【发布时间】：2015-01-22 12:08:34
【问题描述】：

我想创建 rowise 块 ie

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

请给我建议提前谢谢你

【问题讨论】：

将display:inline-block添加到每个框样式。
您也可以将其浮动到左侧：“float: left;”

标签： html css

【解决方案1】：

添加属性 display: 并为其赋值 inline-flex 它将起作用

#div_container
{
    display:inline-flex;
}

【讨论】：

【解决方案2】：

在容器中添加一个新的display 属性div必须做到这一点

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

【讨论】：

我将它添加到父容器中，它已应用于 div2。我想要 div2 下方的 div 3 和 div4

【解决方案3】：

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

css:

 #div_container>div{
    display:inline-block;

}

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

【讨论】：

【解决方案4】：

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

【讨论】：