有没有办法使 div 从右到左渲染 HTML

Question

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

我有一行（divs）和列（divs）。div 不是文本

像这样的东西

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

在 div s 上使用 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>

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

演示小提琴

Answer 3

试试这个

目录

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

Answer 4

with 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