开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >问答首页 >带有CSS3的智能列

问带有CSS3的智能列
EN

Stack Overflow用户

提问于 2014-09-02 01:11:46

回答 1查看 105关注 0票数 0

我在一个<pre>中有一些文本，几乎可以用column-count和媒体查询来做我想做的事情。

http://jsfiddle.net/tbhtrL0f/11/ (更改结果窗格的大小以查看1/2/3列)

有几件事我想要改变，但不知道如何改变：

与其根据媒体查询来执行列数，我更愿意在有足够的水平空间(没有溢出)时添加一个新列。
我想优先在连续两次返回的情况下进行拆分。

如果使用纯CSS，这两种更改都有可能吗？

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-09-02 07:11:28

您的第一个问题是可行的，但第二个问题需要一些标记。

您可以设置列宽度：column-width: 20em (或任何时候适合您的设计的宽度)。这样做意味着该列至少会有那么宽(除非包含的块更窄)，并且只要新列适合该最小度量，就会根据需要添加新列。所以不需要媒体查询。您还可以组合column-width和column-count，这意味着列计数是允许的列的最大数量。最后，有一个columns速记，允许您同时设置两个：columns: 20em 4;
有break-before/break-after和break-inside属性，它们可以应用于列布局中的元素，但不能应用于空白。我会使用JS来检测某些特定类型的空格，并注入一些可以中断的东西。而且，如果我没记错的话，列中断属性不那么受支持，但是我现在找不到关于它的链接。

票数 1

EN

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/25614558

复制

相似问题