0

我有一个两列布局（使用 CSS 多列布局模块），我想在第二列的顶部有一个图像。似乎我必须自己放置图像，以便它位于文本中中断的位置。

问题是我希望列也能均匀填充。

有没有办法在没有 JavaScript 的情况下解决这个问题？这使用 div 而不是图像，但想法是将红色块放在其列的顶部。

.col-2 {
    -webkit-column-count:2;
    -moz-column-count:2;
    column-count:2;
    width:800px;
}

.block {
    width:100%;
    height:100px;
    background-color:red;
}
<div class="col-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam blandit neque sed eros posuere molestie. Quisque mattis ante ac mauris iaculis semper vehicula nibh condimentum. Pellentesque scelerisque euismod metus a sodales. Praesent dolor nisl, consectetur at tincidunt eu, dapibus at orci. Etiam congue metus id sapien rutrum euismod. Proin porttitor rhoncus hendrerit. Phasellus pellentesque venenatis felis a eleifend. Suspendisse pretium placerat hendrerit. Praesent tempus risus in ligula condimentum egestas. Vivamus vitae nunc massa, luctus egestas lectus. Vivamus at turpis sed nisl molestie vulputate. Vivamus nec tortor et ante consectetur dignissim ac in odio. Cras et nisl non enim congue scelerisque. Curabitur in condimentum eros. Curabitur vehicula augue id neque dignissim vitae venenatis nisi feugiat.

Curabitur tristique ullamcorper neque, ac sodales eros suscipit eu. Nulla pretium accumsan lacus, non fermentum felis lacinia mattis. Sed quis turpis eros. Nullam ut turpis libero. Nam quis magna ac tortor elementum pulvinar. Quisque rutrum eleifend elit, eget consectetur nulla dapibus ac. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean rhoncus commodo tellus, sit amet pulvinar mi vehicula non. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi mollis dignissim felis, et posuere quam molestie nec. Duis sit amet pulvinar dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut lorem justo, lobortis id imperdiet nec, lobortis varius mauris. Nullam sit amet nulla arcu. Nullam ornare posuere leo vitae rhoncus.

Sed venenatis dui sapien. Praesent sed enim lacus, vitae venenatis metus. Aenean bibendum nibh a risus scelerisque blandit. Maecenas nibh enim, pulvinar in interdum quis, rhoncus ut orci. Vestibulum a ullamcorper ante. Nulla facilisi. Pellentesque placerat ullamcorper diam at mattis. Aliquam posuere suscipit metus sed sollicitudin. Phasellus in quam odio, ac scelerisque purus. Morbi at nunc odio, nec aliquam urna. Proin mi orci, varius vitae dapibus ac, consequat id purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec a dui lectus, ut congue nunc. Cras diam tortor, auctor in vehicula vitae, egestas eget neque. In nisi odio, laoreet a convallis in, varius at risus.
    <div class="block"></div>
</div>

4

3 回答 3

2

CSS3 规范有一个“分栏”样式，但它只在 Webkit 中实现。它会完全满足您的需求，但遗憾的是仅在 Safari 和 Chrome 中。

您需要让您的分栏元素落入内容的正常流程中，并添加以下样式：

div.block {
  width: 100px; /* this shouldn't be more than your column width */
  height: 100px;
  -webkit-column-break-before: always;
}

示例（在 Safari/Chrome 中查看）

http://css-infos.net/property/-webkit-column-break-before

http://www.w3.org/TR/css3-multicol/#column-breaks

于 2011-01-19T13:42:44.560 回答
1

您可以将两个 div 包装在另一个 div 中，并在标记.block中将 div 放在 div 之前。.col-2

在这里为你举例。

于 2011-01-18T13:25:15.067 回答
0

如果我了解您要做什么（使 div 或图像跨越所有列），那么使用 CSS 执行此操作的方法是指定 column-span: all; 在要跨越整个宽度的元素（img 或 div）上。然而，目前这仅在 Opera 中受支持，并且仅在内部构建中支持（希望我们很快就会发布包含它的公开版本）。

如果不使用 column-span，您将不得不依赖脚本或将标记向上移动到您应用 column-count 的元素之外。

于 2011-01-19T01:58:31.520 回答