智能列與CSS3

Question

我在<pre>幾乎正在做我想要的column-count和媒體查詢中的一些文本。

http://jsfiddle.net/tbhtrL0f/11/（更改結果窗格的大小，看看1/2/3列）

有一對夫婦的事情，我想改變這個，但不知道如何：

1. 而不是做基於媒體查詢的列數，我寧願添加一個新的列，當有足夠的水平空間這樣做（沒有溢出）。
2. 我想優先打破哪裏有兩個回報連續。

這些變化都可以在純CSS中進行嗎？

Answer 1

你的第一個問題是可行的，但第二個問題需要一些標記。

1. 您可以設置列寬，而不是：column-width: 20em（或適合你的設計，曾經的寬度）。這樣做意味着色譜柱的寬度至少要寬（除非包含的色譜柱更窄），並且只要符合該最低標準，就會根據需要添加新色譜柱。所以不需要媒體查詢。您也可以合併column-width和column-count，這意味着列數是允許列的最大數量。最後，還有的columns速記，它允許你在同一時間同時設置：columns: 20em 4;

2. 還有的break-before/break-after和break-inside特性，它們可以集中在列布局內被應用到元素，但不空白。我會使用JS來檢測某些特定類型的空白，並注入一些東西來打破。此外，如果我沒有記錯，列中斷屬性不是那麼廣泛支持，但我現在找不到鏈接。