css - DIV 没有正常流动

Question

我在定位 div 类时遇到了问题，就像通常情况一样。我想得到 DIV 框：

li {
    width:200px;
    height:200px;
    background:red;
    float:left;
    list-style:none;
    margin-right:20px;
    margin-bottom:50px;
    position:relative;
}

li div {
    width:100%;
    height:100%;
    position:absolute;
}

但是然后这些盒子就像绝对定位一样，它们不是我想要的那样 - 在 2 列中，间隙为 20 像素，间隙为 50 像素，但它们被卡住，就像它们将被内联一样，但有 20 像素margin-right，正如我所见，它是从图像的左边框开始计算的，但 margin-bottom 是可以的。

然后我很生气，复制了 TutsPlus.com 中的所有代码 - CSS3 Essentials 视频 - 仍然无法正常工作。使用 HTML5 一切正常，但我不明白 - 为什么我不能像我之前所说的那样得到那些框？

Answer 1

如果您的问题是<li>s 不在两列中，则可以使 s<ul>的宽度为440px（即200 + 20 px（<li>带边距的宽度）乘以 2）。基本上：

ul {
    width: 440px
    }

jsFiddle

Answer 2

默认情况下，绝对定位的元素会从正常流程中删除。您将它们设置为 100% 的宽度，因此它们将与 li 一样宽并相互重叠。