Question

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

我有一行（div）和列（div）。 divs not texts

像这样的东西

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上使用div。这将从右到左呈现#container div { float: right; width: 100px; background: yellow; margin: 10px; }。

Demo

＆＃13;

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

＆＃13;

{{1}}

＆＃13;

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

试试这个

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/

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

请注意旧浏览器http://caniuse.com/#search=flexbox

不支持flexbox

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

4 个答案: