模仿2列雜誌頁面

這不是簡單的2列頁面佈局。相反，它是關於如何創建一個有邊框的CSS框，其行爲就像是一個2列雜誌頁面，內容先填充第一列，然後在第一列空間不足時移動到第二列列（或者是因爲添加了更多文本，或者因爲字體大小增加）。模仿2列雜誌頁面

有關MS Word中2列布局如何工作的幾張圖片可能有助於澄清問題。請記住，關鍵的一點是，我們不知道提前哪些內容屬於第一欄和第二（這是一個簡單的問題）：

內容開始在列1：

enter image description here

內容泄漏到第2列時，字體大小增加：

enter image description here

是否有可能做到這一點在CSS？

來源

2011-08-16 Jonah

沒有，這將需要JavaScript的肯定。 – jackJoe

@jackJoe：不幸的是，它需要JavaScript，如果它必須在當前版本的IE中工作：（ – thirtydot

CSS3了答案：http://www.w3.org/TR/css3-multicol/

參見：http://jsfiddle.net/thirtydot/bjfVe/

#container { 
    -moz-column-count: 2; 
    -moz-column-gap: 1em; 
    -moz-column-rule: 1px solid #666; 

    -webkit-column-count: 2; 
    -webkit-column-gap: 1em; 
    -webkit-column-rule: 1px solid #666; 

    column-count: 2; 
    column-gap: 1em; 
    column-rule: 1px solid #666; 
}

的瀏覽器支持..非常明確：http://caniuse.com/multicolumn

來源

2011-08-16 18:47:37 thirtydot

不錯，我不知道那:)雖然它不是交互式的（取決於字體大小的變化），但它證明它可以通過CSS完成。 – jackJoe

模仿2列雜誌頁面

回答

相關問題