1

这似乎应该很容易，但我无法让它工作：/所有元素的总宽度小于 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;
}
4

1 回答 1

1

更新：

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

您可以使用绝对定位或排列为 3 个“列”： left col with blue div; 带有蓝色 div、绿色 div、蓝色 div 的中间 col；最后一个带有蓝色 div 的 col

更新 2：

也许如果您将它们视为构建块，它可能会有所帮助。蓝绿蓝适合顶行。下一个蓝色没有，所以它向下移动。它试图越过左边距，但绿色块挡住了它，它不能穿过绿色块。那有意义吗？

于 2012-05-17T19:24:56.093 回答