如何用开头的空行填充从末尾开始的 CSS3 列？

Question

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

空 |空 |空 |内容

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

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;
}

这里是 fiddle：https://jsfiddle.net/eLxx9ht4/2/

Answer 2

因为无法使用 CSS 中的列布局。请参考W3C标准及其示例here.

相反，您必须通过宽度来控制列.. 表示 divide 列 div 并计算 100%/no 列的宽度并首先制作三个 div 作为禁用。

希望这对您有所帮助。

如何用开头的空行填充从末尾开始的 CSS3 列？

How to fill CSS3 columns starting from the end with empty ones at the beginning?

css

multiple-columns