有没有一种方法可以使div从右到左渲染HTML？

Question

我有一个项目（日历），我想将它转换成阿拉伯语。我不知道“渲染”是否是正确的术语，但我只想做的就是从右到左显示

。

我有一行

（列）

。

类似于这样：

div1 div2 div3
div4 div5 div6
div7 div8 div9

to

div3 div2 div1
div6 div5 div4
div9 div8 div7

我的项目是响应式的，因此手动将其倒退不起作用。

这就是我所说的较小分辨率。

div2 div1
div4 div3
div6 div5
div8 div7
div9

非常感谢您的提问，我们非常欢迎任何解决方案，无论是不正规的或者正规的，无论是黑客手段还是非黑客手段。在此预先表示感谢。 :)

- Keensleeeeeeee

---

使用 body { direction:rtl; } 有什么问题？ - AmmarCSE

Answer 1

在 div 上使用 float: right。这将使 div 从右向左渲染。

演示

#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>

- Tushar

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

- Bogdan Kuštan

Answer 3

尝试这个

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

演示

http://jsfiddle.net/weoej4yn/

- Newinjava

Answer 4

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

请注意，旧版浏览器不支持flexboxhttp://caniuse.com/#search=flexbox。

- Luca