如何將大文本分成多個塊，所有塊都具有相同的最大高度？

CSS3的列模塊允許您將文本分成多列。或者通過如何將大文本分成多個塊，所有塊都具有相同的最大高度？

1）指定列-height屬性（所有列將具有相同的設計者定義的高度，列計數是動態的）

，或者

2）指定列數屬性（所有列具有相同的計算機生成高度，列數由作者定義）。

我想要的是選項1，但不是每個其他列旁邊的列我都想讓它們在下面。這樣他們不會真的是列，但更像行具有定義的高度。

這樣，文本將被分成所有高度相同的頁面。（就像當你打印一個網頁時一樣）。

關於如何實現這一點的任何想法？（我的項目只需要Webkit支持。）

來源

2010-10-07 Marc

難道你只是使用段落和指定一個'高度'是否達到很多相同？ – 2010-10-07 17:52:23

有時候，'文字'存在於多個段落中，有時它包含圖像，列表等。它非常動態，我不能強迫它適合特定的高度。這就是爲什麼多列思考很好的原因：它會自動包裝內容。 - 唯一的事情是，我需要行而不是列。 – Marc 2010-10-10 14:59:30

列模塊不會那樣做。你最好在聲明高度的div上聲明一個類。如果你正在尋找動態列，你可能需要通過js或php做一些編程。

來源

2010-10-07 20:10:32 tahdhaze09

我想用Javascript可能是一個解決方案。我大概可以計算在哪裏砍掉文本，並將每個塊放在單獨的DIV中。 - 關於從哪裏開始的任何想法？ – Marc 2010-10-10 15:02:22

這種方式是瘋狂。基本上你正在嘗試創建CSS3分頁媒體查詢，並添加了一個用於列處理的擴展。即使在邊緣瀏覽器中，分頁媒體查詢也不受支持。 – 2010-10-11 03:19:45

順便說一句，我做發揮與以下想法哪種類型的作品：

使用多列DIV分裂文成不同的同高度塊。
將多列DIV複製X次，其中X =生成的列數。
在每個DIV上，只顯示一列。（通過使用溢出：隱藏和寬度）
定位列以使它們位於彼此之下。

這個工作，但是很慢，你可以想象。

也許有一種方法可以在不復制整個DOM樹的情況下使用不同的視口顯示多個相同的多列DIV？

來源

2010-10-10 15:06:33 Marc

JS似乎是要走的路。看看這個jQuery function from the Filament Group。 Masonry也可能是有趣的。

// make columns equal height 
function equalHeight(group) { 
    tallest = 0; 
    group.each(function() { 
    thisHeight = $(this).height(); 
    if(thisHeight > tallest) { 
     tallest = thisHeight; 
    } 
    }); 
    group.height(tallest); 
}

來源

2010-11-13 00:26:36 juddlyon

如何將大文本分成多個塊，所有塊都具有相同的最大高度？

回答

相關問題