css 样式表中的 `float:left` 和 rtl 方向

Question

当以从右到左的语言查看页面时，如何将 float:left 转换为 float:right？ （使用相同的JSP文件）

Answer 1

你不能只是“转动”它，尤其是使用纯CSS。

您的一些选择是：

1. 创建两个单独的 CSS 样式表（例如 ltr.css 和 rtl.css），每个样式表都有自己的规则，然后使用服务器端代码加载正确的文件。
2. 当切换到 rtl 视图时，使用 JavaScript 代码迭代所有相关元素并更改其样式 - 使用 jQuery，实现起来非常简单，但也可以使用纯 JavaScript。

Answer 2

.FLeft {
  float: left !important;
}

.FRight {
  float: right !important;
}

div.main-div[dir='rtl']>.FLeft {
  float: right !important;
}

div.main-div[dir='rtl']>.FRight {
  float: left !important;
}

div.child-div {
  width: 50%;
  background-color: #e6ffe6;
}

<div class="main-div">
  <div>
    <div class="FLeft child-div">1. Float left (default)</div>
    <!-- For style= "float: left;" -->
  </div>
  <div style="clear:both"></div>
  <div class="FLeft  child-div" dir="rtl">2. Float left (rtl)</div>
  <!-- For style="float: right"; ltr  -->
  <div style="clear:both"></div>

  <div class="FRight child-div">3. Float right (default)</div>
  <!-- For style= "float: right;" -->
  <div style="clear:both"></div>
  <div class="FRight  child-div" dir="rtl">4. Float right (rtl)</div>
  <!-- For style="float: right";  ltr-->
  <div style="clear:both"></div>
</div>
<hr/>
<!-- Now for rtl text in div-main -->

<div class="main-div" dir="rtl">
<p>For dir rtl</p>

    <div class="FLeft child-div">1. Float left</div>
    <!-- For style= "float: left;" -->

  <div style="clear:both"></div>
  <div class="FLeft child-div " dir="ltr">2. Float left (ltr)</div>
  <!-- For style="float: right"; rtl  -->
  <div style="clear:both"></div>

  <div class="FRight child-div">3. Float right (default)</div>
  <!-- For style= "float: right;" -->
  <div style="clear:both"></div>
  <div class="FRight child-div" dir="ltr">4. Float right (ltr)</div>
  <!-- For style="float: right";  rtl-->
  <div style="clear:both"></div>
</div>

将 div.main-div 替换为您正在使用 dir="rtl" 的正文或标记，并使用 FLeft 和 FRight 类来代替内联浮动样式。请考虑使用 CSS 作为解决方案，因为我的 html 演示很糟糕。对于 rtl div.，左浮动元素会向右浮动。