使用CSS在多列布局頂部的圖像

Question

我有兩列布局（使用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> 

Answer 1

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

Answer 2

您可以將兩個div包裹在另一個div中，並將.block div放在標記中的.col-2 div之前。

這里給你的例子 。

Answer 3

如果我了解您要執行的操作（使div或圖像完全覆蓋所有列），則使用CSS進行此操作的方法是指定column-span：all; 在您要跨越整個寬度的元素（img或div）上。 但是，目前只有Opera以及內部版本才支持此功能（希望我們不久將包含一個公共發行版）。

在不使用column-span的情況下，您將不得不依靠腳本或將標記上移到要應用column-count的元素之外。