html - 如何使用跨越多列的 "floating"对象进行 CSS 列布局？

Question

我想在 CSS 中创建一个如下所示的布局:

+----------------+ __5_____
|                | __6_____
|                | __7_____
|                | __8_____
+----------------+ __9_____
___1____ __3_____  __10____
___2____ __4_____

基本上，文本(在上图中，标记为 1 到 10 的行)以三列布局排列， block (图像或其他)位于左上角，占据两列，取代文本。

重要的是，我真的很想避免手动指定分栏符的位置，因为内容是用户提供的。我一直在使用 CSS 列系列属性(列宽、列数等)来获取文本的列布局，但我没有成功地将大 float block 放在我想要的位置。有没有一种方法可以做到这一点，而不涉及一堆 JS 来计算最佳分栏位置，并自己生成分栏？

编辑添加:如果不清楚，在这个例子中有 10 行，但在实践中我需要能够处理任意数量的行并仍然获得大致相等高度的列。

Answer 1

您可以尝试将图像 div 宽度设置为容器的 66%，并在两侧添加填充以使其与列之间的空白对齐:

.div-with-image {
    width: 66%; // 2/3 of the container
    padding: 0 20px; // assuming 20px gutters for the columns
}

更新

作为current state of the CSS Multi-column Module ，使图像跨越多个列的唯一“自然”替代方法是通过 column-span 属性或在列内溢出图像。

但是，column-span doesn't support -yet- none(默认值)和 all 以外的其他值，并且溢出不会替换下一列中的文本，但 would just cover it或 will be clipped按包含列(取决于浏览器)。

我想到的最干净的解决方案:

将您的图像绝对定位到左上角并将其宽度定义为跨越 2 列，将第一段的上边距设置为图像的高度并在虚拟元素(只是一个占位符，可以是span) 标识为一个类。最后，由于该虚拟元素将位于第二列的第一行，因此您可以分配与第一列第一段相同的边距顶部。

#image-placeholder {
  width: 600px;
  height: 200px;
  background-color: lightgreen;
  position: absolute;
  top: 0;
  left: 0;
}

#columnized {
  -moz-column-width: 300px;
  column-width: 300px;
  position: relative;
}

#columnized p:nth-child(2) { // the image is the first child
    margin-top: 200px;
}

.break { // your dummy element (I used a span)
    break-before: always;
    display: inline-block;
    margin-top: 214px; // I had to tweak the margin a little
}

附加说明

我知道您的代码段尽可能简单，但以防万一:请记住添加 p 标签并使其响应(最佳实践)。您可能需要设置 #columnized div 的高度，以便在不同的屏幕尺寸上使用相同的分界线。