Question

我正在阅读this文章。我遇到了可变高度块的例子。请看图像。所有街区都悬空了。

＆＃13;

li {
  list-style: none;
  float: left;
  margin: 4px;
}

＆＃13;

<ul>
  <li><img src="http://placehold.it/100x100&text=1" /></li>
  <li><img src="http://placehold.it/100x150&text=2" /></li>
  <li><img src="http://placehold.it/100x100&text=3" /></li>
  <li><img src="http://placehold.it/100x100&text=4" /></li>
  <li><img src="http://placehold.it/100x100&text=5" /></li>
  <li><img src="http://placehold.it/100x150&text=6" /></li>
  <li><img src="http://placehold.it/100x100&text=7" /></li>
</ul>

＆＃13;

在给定的规则中，什么规则解释了块4,5,6的定位。

规则9明确规定：

9.左侧浮动箱必须尽可能地放在左侧，右侧浮动箱尽量放在右侧。较高的位置优于远离左/右的位置。（无需翻译）

由此，不应该将块4放置在1以下。作者还指出这很令人困惑。但再也没有在文章中解决它。或许我错过了一些东西。

Answer 1

来自spec，在文章中逐字引用（就在普通英语释义之前）：

如果当前框是左浮动的，并且源文档中较早的元素生成了任何左浮动框，则对于每个此类较早的框，要么当前框的左外边缘必须在右侧早期框的右外边缘，或其顶部必须低于前一个框的底部。类似的规则适用于右浮箱。

由于更高的位置是优选的，所以当确定块4的水平位置时，它已经被定位在块3的正下方。因为块2（也是左浮箱）在源代码的早期，现在已经挡路了，块4不能水平移动以便定位在块1下面，因此它位于块3的下面。

Answer 2

Michael Coker对这个问题的评论是正确的。

您发布的文章确实使用var makeTest = function (runMoreTests, resolutionTest) { return function runTest() { return tryOpenStream(resolutionTest).then(streamToDom).then(result => { if (result) return result; else return runMoreTests(); }); }; } return resolutionTests.reduceRight(makeTest, () => Promise.reject("nothing succeeded"))();

显示了此问题的解决方法

在最简单的术语中，元素将始终尝试并浮动在最后一个上一个浮动元素旁边。如果它不能，它会漂浮到它下面的左边。

由于元素2高于元素3，它阻止元素4一直向左移动，因此将其粘在元素3下面。

Float不考虑行，因此它总是会尝试适合最近的可用空间。

CSS浮点数对可变高度块的奇怪定位的解释

2 个答案: