如何从头开始填充CSS3列，开头是空的？

Question

我想从头开始填写CSS3列。有没有办法用纯CSS做到这一点？因此，如果我有4列，它们应该如下所示：

空|空|空|含量

我尝试了direction: rtl;，但最后只有一列，开头没有空列。

http://jsfiddle.net/bruha/m51oopdm/

Answer 1

这可能是纯CSS3解决方案。将.cols <div>包裹在指定<div>方向的另一个rtl内。根据需要设置此rtl <div>的宽度。

<div class = 'rtl'>
    <div class = 'cols'>
        your text here
    </div>
</div>

CSS： 您还需要指定列数并将text-align: left;添加到.cols，以便文本在列内正确对齐。

.cols {
    column-count: 4;
    -webkit-column-count: 4;
    -webkit-column-width: 30px;
    column-width: 30px;
    -webkit-column-gap: 10px;
    column-gap: 10px;
    -webkit-column-rule: 1px solid red;
    column-width: 1px solid red;
    text-align: left;
}
.rtl{
    width: 30%; /* specify this as you like */
    direction: rtl;
}

这是一个小提琴：https://jsfiddle.net/eLxx9ht4/2/

Answer 2

因为它无法与CSS中的Column布局相关。 请参阅W3C标准及其示例here。

相反，你必须通过宽度来控制列。意味着将列除以div并将宽度计算为100％/ no cols，并将前三个div作为禁用。

希望这应该有所帮助。