如何从末尾开始用空列填充 CSS3 列？答案

【问题标题】：How to fill CSS3 columns starting from the end with empty ones at the beginning?如何从末尾开始用空列填充 CSS3 列？
【发布时间】：2015-05-18 08:02:14
【问题描述】：

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

空 |空|空|内容

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

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

【问题讨论】：

尝试将float:left 添加到您的列中
你可以在Jsfiddle中发布示例代码
请您提供代码来显示您到目前为止所做的尝试。
您说的是通用网格系统，还是 CSS3 列系统（即column-count）？
@Jack 我说的是 CSS3 列系统（列规则）

标签： css multiple-columns

【解决方案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/

【讨论】：

【解决方案2】：

因为它不可能在 CSS 中使用 Column 布局。请参考 W3C 标准及其示例here。

相反，您必须通过宽度来控制列.. 意味着将列除以 div 并计算宽度为 100%/没有列，并将前三个 div 设为禁用。

希望这会有所帮助。

【讨论】：