如何使用跨越多个列的“浮动”对象进行 CSS 列布局？

Question

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

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

基本上，文本（在上图中，标记为 1 到 10 的行）以三列布局排列，左上角有一个块（图像或其他），占据两列，取代文本。

重要的是，我真的很想避免手动指定分栏符的位置，因为内容是用户提供的。我一直在使用 CSS 列系列属性（列宽、列数等）来获取文本的列布局，但我没有成功地将大浮动块放在我想要的位置。有没有办法做到这一点，不涉及一堆 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-spandoesn'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
}

补充说明

我知道您使您的 sn-p 尽可能简单和可行，但是，以防万一：记得添加 p 标签并使其具有响应性（最佳实践）。您可能需要设置 #columnized div 的高度，以便在不同的屏幕尺寸上使用相同的分隔符。

Answer 2

您可以只做一个简单的两列布局，并在需要时将一列分成两半。 JSFiddle

/* 2 column grid */
.gridWrapper {
    width: 80%;
    float: none;
    margin: 0 auto;

    margin-top: 50px;
    margin-bottom: 50px;
}

.column {
    float: left;
    width: 50%;
    padding: 10px;
    box-sizing: border-box;
}

.column img {
    width: 100%;
    max-width: 400px;
    height: auto;
    margin: 0 auto;
    display: block;
    padding: 10px;
    box-sizing: border-box;
}

.column p {
    float: left;
    width: 100%;
    padding: 10px;
    margin: 0 0 5px;
    box-sizing: border-box;
    text-align: center;
    border: 1px solid gray;
}

.left, .right {
    border: 1px solid blue;
}

.split {
    float: left;
    width: 50%;
    padding: 10px;
    box-sizing: border-box;
    text-align: center;
    border: 1px solid red;
}

<div class="gridWrapper">
  <div class="column left">
    <div class="image">
      <img src="http://c.shld.net/rpx/i/s/i/spin/image/spin_prod_709722401??hei=64&wid=64&qlt=50">
    </div>
    <div class="split">
      <p>1</p>
      <p>2</p>
    </div>
    <div class="split">
      <p>3</p>
      <p>4</p>
    </div>
  </div>
  <div class="column right">
    <p>5</p>
    <p>6</p>
    <p>7</p>
    <p>8</p>
    <p>9</p>
  </div>
</div><!-- END gridWrapper -->