Question

This似乎应该很容易，但我无法让它发挥作用：/ 所有元素的总宽度小于100％，那么为什么它们都不能很好地吻合在一起呢？

编辑抱歉，如果我不清楚的话。为什么第3个蓝色.square位于下方并保持在右侧 - 而不是被推回到左侧第1个蓝色.square下方？

非常感谢任何帮助！

<div class="outer">
    <div class="square"></div>

    <div class="bigsquare"></div>

    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
</div>

.outer {position:absolute;width:80%;left:10%;height:100%;border:solid black 2px;
}
.square {
    height: 16%;width: 19%;border-radius: 0px;border:solid 1px #262626;float: left;margin:0px;overflow: hidden;position: relative;padding:0px;background-color:blue;
}

.bigsquare { height: 50%;    width: 57%;border-radius: 6px;background-color:green;border:solid 0px #262626;float: left;    overflow: hidden;position: relative;
    padding:0px;
}

Answer 1

更新：

“Float：left”不会使它们成为左边距的元素线，它们尽可能地向左移动，直到它们遇到另一个元素来阻挡它们。在这种情况下，蓝色div向左浮动，直到它们遇到绿色div。

您可以使用绝对定位或排列为3“列”：左侧col与蓝色div;中间的蓝色div，绿色div，蓝色div;和最后一个col与蓝色divs

更新2：

也许如果你认为它们是构建块，它可能会有所帮助。蓝绿蓝适合顶行。下一个蓝色不是这样它向下移动。它试图转到左边缘但是绿色块阻挡了它并且它不能通过绿色块。这有意义吗？

带有'float：left`的盒子正在下面而不是左边到下一个可用的位置

1 个答案: