4

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

4

2 回答 2

3

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

您的一些选择是：

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

.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.，向左浮动的元素向右浮动。

于 2021-10-19T11:50:45.097 回答