Как заполнить столбцы CSS3, начиная с конца пустым в начале?

Question

Я хочу заполнить колонки CSS3, начиная с конца. Есть ли способ сделать это с помощью чистого CSS? Так что, если у меня есть, например, 4 столбца, они должны выглядеть так:

пустой | пустой | пустой | content

Я пробовал 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. См. Стандарты W3C и пример here.

Вместо этого вы должны управлять столбцами по ширине .. означает разделение столбца на div и вычисление ширины из 100%/no cols и создание первых трех div как отключенных.

Надеюсь, это должно помочь.