2

我怎样才能有一个固定的列布局，但在开始下一个之前让文本垂直填充列。换句话说（来自 chrome 的屏幕截图）；

在此处输入图像描述

问题是，当我指定 5 列时，它甚至会分散一条线，该线可以完全适合一列，并且尽可能多地分布。

不是这个

我似乎无法让它做“明智”的事情。我不想动态更改列数，我希望能够使用纯 CSS 做到这一点。在移动到第二列之前先填充第一列，然后是第三列，依此类推。

可能吗？这是我目前使用的；

.content{
-webkit-column-count: 5;
-moz-column-count: 5;
-ms-column-count: 5;
-o-column-count: 5;
column-count: 5;

-webkit-column-gap: 20px;
-moz-column-gap: 20px;
-ms-column-gap: 20px;
-o-column-gap: 20px;
column-gap: 20px;
}

小提琴

4

2 回答 2

2

如果您将内容包装在<p>或类似的内容中并将其应用于该内容break-inside，则它可以工作：http: //jsfiddle.net/26NGr/1/

.content p {
    margin: 0;
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
}
于 2013-08-05T15:32:16.703 回答
2

我可以使用以下 CSS 进行排序；

column-fill:auto; /* not supported in chrome, but appears to be the default */
height:100px;

但是它不适用于%尺寸。我将不得不使用px我无法做到的固定尺寸。

更新

但是，此解决方案适用于相对大小，并且似乎适用于最新的 Chrome、IE、FF 和 Safari。

使用 padding-bottom 技巧，我设法为wrapper容器设置了相对高度；

.wrapper {
    padding-bottom:10%; /* spacer - this is my relative height */
    background-color:lightblue;
    position:relative; /* abs coord stop here */
}

有了这个;

<h1>short test</h1>
<div class="wrapper">
   <div class="content">
   The quick brown fox jumps over the lazy dog.
   </div>
</div>

然后我可以这样做；

.content{
    -webkit-column-count: 5;
    -moz-column-count: 5;
    -ms-column-count: 5;
    -o-column-count: 5;
    column-count: 5;

    -webkit-column-gap: 20px;
    -moz-column-gap: 20px;
    -ms-column-gap: 20px;
    -o-column-gap: 20px;
    column-gap: 20px;

    column-fill:auto;

    position:absolute;
    top:0;
    left:0;
    height:100%; /* fill wrapper container */
    width:100%;

    background-color:lightgray;
}

权衡是，如果我的内容太多，它将继续水平添加超过我请求的 5 列。它不会向下扩展，但我想这实际上是有道理的。

于 2013-08-05T15:36:27.400 回答