如何在不使用表的情况下浮动div

Question

你好我如何使用CSS float和其他方法使用这样的divs布局。我试图避免使用表格，并学习如何正确浮动div。 感谢

Answer 1

第一个id使用带有display：block的主div; 然后在你的示例的主div内创建4个子div与display：inline-block;

Answer 2

也许看看Singularity或Susy等解决方案。两个有能力的网格框架可以帮助您完成您打算做的事情，并保持数学的必要性。 ;）

Answer 3

感叹那些箱子很多; D。我无法确切地看到每个盒子的尺寸，但我尽力复制你展示的内容（没有使用绝对或相对定位！）。

这是jsFiddle：link 格式化是奇怪的，jsFiddle的tidyUp对我不起作用

以下是codepen：link 使用此代码

诀窍是当你想要东西水平堆叠时使用float：left。如果希望它们垂直堆叠，只需将这些元素包装在容器中，并确保每个元素都有display：block。你使用这两件事来完成这类事情。

HTML：

<div id="container">
    <div id="left0">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div id="left1"></div>
    <div id="left2"></div>
    <div id="row1">
        <div></div>
        <div></div>
    </div>
    <div id="row2"></div>
    <div id="row3">
        <div></div>
        <div></div>
    </div>
</div>

CSS：

*{ /*includes the border in height&width*/
    box-sizing: border-box;
}

div{ /*gives us some general spacing*/
    margin: 5px;
    background: lightblue;
}

#container{
    width: 1200px;
  margin: 1em auto;
  background: lightgray;
}
/*gives a float-left property to first-level children*/
#container > div{
  float: left;
}

#container > div > div{
  border: 1px solid red;
}


#left0{
  width: 50px;
}

#left0 > div{ /*styles for little boxes*/
  height: 40px;
  margin: 5px;
}

#left1{
  width: 230px;
  height: 230px;
}

#left2{
  width: 150px;
  height: 230px;
}

#row1{
  width: 600px;
  height: 50px;
}

#row1 div:nth-child(1){
  float: left;
  width: 350px;
  height: 40px;
}

#row1 div:nth-child(2){
  float: left;
  width: 230px;
  height: 40px;
}

#row2{
  width: 600px;
  height: 70px;
}

#row3{
  width: 600px;
  height:90px;
}

#row3 div:nth-child(1){
  width: 200px;
  height: 40px;
  float: left;
}

#row3 div:nth-child(2){
  width: 100px;
  height: 80px;
  float: right;
}

我会评论一下我用过的一些css3选择器，以防你不熟悉它们。