Question

我有一个需要支持所有语言的Web应用程序，包括中东。

经过一些阅读后，似乎在许多情况下使用dir标签完成了工作（例如，文本正确对齐，并且我有一个表在需要时正确交换）。

我正在使用Angular，在主控制器中，我将全局变量设置为rtl或ltr，具体取决于所选语言。

然而，有一种情况是交换没有像我期望的那样发生。有4个div提供如下文字信息：

<div style="width:100%" dir="{{Language_Layout}}">

    <div style="width:25%">
      {{Text_of_Div_1}}
    </div>
    <div style="width:25%">
      {{Text_of_Div_2}}
    </div>
    <div style="width:25%">
      {{Text_of_Div_3}}
    </div>
    <div style="width:25%">
      {{Text_of_Div_4}}
    </div>
</div>

选择西方语言时，这些div显示为：

+--------------++--------------++--------------++--------------+
|              ||              ||              ||              |
|              ||              ||              ||              |
|  <text 1>    ||   <text 2>   ||   <text 3>   ||  <text 4>    |
|              ||              ||              ||              |
|              ||              ||              ||              |
+--------------++--------------++--------------++--------------+

当选择中东语言时，我的期望是它会显示为：

+--------------++--------------++--------------++--------------+
|              ||              ||              ||              |
|              ||              ||              ||              |
|  <text 4>    ||   <text 3>   ||   <text 2>   ||  <text 1>    |
|              ||              ||              ||              |
|              ||              ||              ||              |
+--------------++--------------++--------------++--------------+

令我惊讶的是，显示内部div的顺序保持不变（例如上面的西方语言示例）。

如上所述，根据Language_Layout变量的设置，我有一个确实的表格。

有人能告诉我我做错了什么，或许，我不应该期望div在他们的顺序中被逆转？

谢谢！

Answer 1

对于一行中的html块，我看到direction具有以下效果：

使用内联块（有效）
如果你漂浮它们（不起作用）
如果您使用flexbox（有效）
表格显示（作品）

所以我猜你有切换direction时的选项。请告诉我您对此的反馈。谢谢！

$('button').click(function(e) {
  if ($(e.target).text() == "Left") {
    $('.wrapper').addClass('left');
    $('.wrapper').removeClass('right');
  } else {
    $('.wrapper').removeClass('left');
    $('.wrapper').addClass('right');
  }

});

.wrapper {
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  padding: 10px 0;
}
.title {
  margin: 5px 0;
}
.box {
  height: 100%;
  width: 25%;
  border: 1px solid green;
  margin: 5px;
}
.box.inline-block {
  display: inline-block;
  vertical-align: middle;
}
.box.float {
  display: inline-block;
  vertical-align: middle;
  float: left;
}
.wrapper.flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}
.wrapper.table {
  display: table
}
.wrapper.table > .box {
  display: table-cell;
}
.btn {
  background: #fff;
  border: 1px solid black;
}
.btn.l {
  border: 1px solid blue;
}
.btn.r {
  border: 1px solid red;
}
.btn_wrapper {
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  padding: 10px 0;
}
.left {
  direction: ltr;
}
.right {
  direction: rtl;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="btn_wrapper">
  <button class="btn l">Left</button>
  <button class="btn r">Right</button>
</div>
<div class="title">
  1. Using inline block (works)
</div>
<div class="wrapper">
  <div class="box inline-block">text 1.</div>
  <div class="box inline-block">text 2.</div>
  <div class="box inline-block">text 3.</div>
</div>
<div class="title">
  2. If you float them (does not work)
</div>
<div class="wrapper">
  <div class="box float">text 1.</div>
  <div class="box float">text 2.</div>
  <div class="box float">text 3.</div>
  <div style="clear:both"></div>
</div>
<div class="title">
  3. If you use flexbox (works)
</div>
<div class="wrapper flex">
  <div class="box">text 1.</div>
  <div class="box">text 2.</div>
  <div class="box">text 3.</div>
</div>
<div class="title">
  4. table display (works)
</div>
<div class="wrapper table">
  <div class="box">text 1.</div>
  <div class="box">text 2.</div>
  <div class="box">text 3.</div>
</div>

HTML RTL / LTR切换

1 个答案: