Q

如何使文本通過使用css3的2列2行進行流動？

2011-11-21 28 views 4 likes

4

目前我有一個1024像素寬的div。如何使文本通過使用css3的2列2行進行流動？

在該框中有兩個CSS3列，文本從一個到另一個自動流動。

但是，我想限制這兩列的高度爲700px - 一旦它們滿了，我想再多出兩個高度相同的列出現在它們下面。

這可能嗎？

2011-11-21 gimme5

+0

「我有一個div」我們可以看到嗎？ ;） –

+0

我想你想構建水手。像這樣：http://blogs.msdn.com/b/ie/archive/2011/10/10/building-rich-text-centric-pages-in-ie10.aspx。我對嗎？ – nowaq

+0

這是現在由Adobe的CSS3區域提案解決http://www.adobe.com/devnet/html5/articles/css3-regions.html – gimme5

A

回答

1

好的。完全可以實現我認爲你即將建立的目標。然而，如果你想自己做，你需要更多的CSS3樣式。您還需要相當數量的JavaScript。

看看this Columnizer jQuery plugin（它可以做的工作）

這裏顯示的是結果的示例站點的工作：

將通過提到的Adobe CSS區的建議：在這個http://welcome.totheinter.net/autocolumn/sample10.html

2011-11-21 16:39:04 nowaq

+0

嘿，感謝nowaq的答覆...所以我已經做了有兩列流的盒子模型，並希望有一種css3的方式，使文本流入另一組列 - 令人遺憾的是沒有真正的。你不可能真的有兩列文字延伸得太低，讀者不得不向下滾動閱讀第一列......然後一路回到第二列。我今天發現了Columnizer，但很高興你推薦它，我會給它一個鏡頭。如果有人想參加並建議css3的方式讓我知道！ – gimme5

1

更新gimme5看起來很棒。不幸的是，根據caniuse.com的說法，現在似乎只有很少的瀏覽器支持 - 它已從當前版本的Webkit中刪除。

有一個更簡單的方案可以完成所需的工作：CSS多列布局（http://www.w3.org/TR/css3-multicol/）似乎具有更廣泛的瀏覽器支持。我還沒有嘗試過，但它可能會爲你工作，而無需堆積大量的Javascript。

2013-03-26 11:20:24 xgretsch

相關問題