如何使用跨多列的「浮動」對象做CSS列布局？

Question

我想創建在CSS的佈局看起來像這樣：

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

基本上，文本（如上圖中，線標記爲1至10）被安排在三列布局，坐在左上方的一個塊（圖像或其他），佔據兩列，取代文本。

重要的是，我真的很想避免手動指定列中斷的位置，因爲內容是用戶提供的。我一直在使用CSS列屬性系列（列寬，列數等）來獲取文本的列布局，但是我並沒有將大浮動塊放在我想要的位置。有沒有辦法做到這一點，不涉及一堆JS來計算最佳列間隔位置，並自己生成列？

編輯添加：如果不清楚，在這個例子中有10行，但實際上我需要能夠處理任意數量的行，仍然可以獲得大致相同高度的列。

Answer 1

你可以試試你的形象格寬度設置爲容器的66％，並在兩側添加填充與列之間的空白對齊：

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

UPDATE

作爲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 
} 

其他注意事項

我知道，你做你的代碼段一樣簡單和可行的，但是，以防萬一：記得添加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 -->