Есть ли способ сделать div рендеринга справа налево HTML

Question

У меня есть проект (календарь), и я хочу преобразовать его в арабский. Я не знаю, соответствует ли , но все, что я хочу сделать, это показать div справа налево.

У меня есть строка (divs) со столбцами (divs). дивы не тексты

Что-то вроде этого

div1 div2 div3 
div4 div5 div6 
div7 div8 div9 

в

div3 div2 div1 
div6 div5 div4 
div9 div8 div7 

Мой проект реагирует, поэтому вручную поставив его в обратном направлении не будет работать.

Это то, что я имею в виду с меньшим разрешением.

div2 div1 
div4 div3 
div6 div5 
div8 div7 
div9 

Любые решения .. грязные или чистые, взломать или нет. Заранее спасибо. :)

Answer 1

Использование float: right на div s. Это даст div s справа налево.

Demo

#container div { 
 
    float: right; 
 
    width: 100px; 
 
    background: yellow; 
 
    margin: 10px; 
 
}

<div id="container"> 
 
    <div>1</div> 
 
    <div>2</div> 
 
    <div>3</div> 
 
    <div>4</div> 
 
    <div>5</div> 
 
    <div>6</div> 
 
    <div>7</div> 
 
    <div>8</div> 
 
    <div>9</div> 
 
    <div>10</div> 
 
</div>

Answer 2

Вы можете использовать CSS direction свойство для управления inline и inline-block элементы отображаются.

HTML:

<div class="day day-1">1</div> 
<div class="day day-2">2</div> 
<div class="day day-3">3</div> 
<div class="day day-4">4</div> 
<div class="day day-5">5</div> 
<div class="day day-6">6</div> 

CSS

body { 
    direction: rtl; 
} 
.day { 
    display: inline-block; 
    width: 64px; 
    height: 64px; 
} 

.day-1 { 
    background: red; 
} 
.day-2 { 
    background: green; 
} 
.day-3 { 
    background: yellow; 
} 
.day-4 { 
    background: blue; 
} 
.day-5 { 
    background: lime; 
} 
.day-6 { 
    background: lightblue; 
} 

Demo fiddle

Answer 3

flexbox с:

<div class="container"> 
    <div class="item-a">...</div> 
    <div class="item-b">...</div> 
    <div class="item-c">...</div> 
</div> 

.container { 
    display: flex; /* or inline-flex */ 
    flex-wrap: wrap-reverse; 
} 

.item-a { 
    order: 3; 
} 

.item-b { 
    order: 2; 
} 

item-c { 
    order: 1; 
} 

flexbox обратите внимание, что я ы не поддерживается старыми браузерами http://caniuse.com/#search=flexbox

Answer 4

Попробуйте

Html

<div id="container" dir="RTL">// you can use dir="RTL" global attribute 
    <div>1</div> 
    <div>2</div> 
    <div>3</div> 
    <div>4</div> 
    <div>5</div> 
    <div>6</div> 
    <div>7</div> 
    <div>8</div> 
    <div>9</div> 
    <div>10</div> 
</div> 

CSS

#container div{ 
    display:inline-block; 
    width:100px; 
} 

Demo

http://jsfiddle.net/weoej4yn/