`float:left` 和 CSS 样式表中的 rtl 方向答案

【问题标题】：`float:left` and a rtl direction in a css stylesheet`float:left` 和 CSS 样式表中的 rtl 方向
【发布时间】：2011-08-02 09:59:32
【问题描述】：

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

【问题讨论】：

好问题，如果这可以通过 CSS 处理，那就太好了

标签： html css right-to-left

【解决方案1】：

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

您的一些选择是：

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

【讨论】：

Tnx。如何从服务器加载 CSS？
@Ben 取决于您的服务器端语言是什么。基本上您需要向浏览器发送正确的 HTML，例如Response.Write("<link rel=\"stylesheet\" type=\"text/css\" href=\"ltr.css\" />");

【解决方案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.，向左浮动的元素向右浮动。

【讨论】：