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 像素，但它们被卡住了，就像它们是内联的一样，但是有 20px margin-right，正如我所见，它是从图像的左边框开始计算的，但是 margin-bottom 是可以的。

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

Answer 1

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