4

现在我正在一个双语网站上工作，对如何处理 RTL CSS 代码有点困惑。我有以下两件事；

1. 单个 CSS 文件 - 覆盖 LTR 默认代码。

  .content {
     position: relative;
     padding: 5px 10px 5px 240px;
  }

  .rtl .content {
     padding-right: 240px;
     padding-left: 10px;
   }

2. 单个 CSS 文件 - 没有覆盖 

  .content {
     position: relative;
     padding-top: 5px;
     padding-bottom: 5px;
  }
  .ltr .content {
     padding-left: 240px;
     padding-right: 10px;
  }

  .rtl .content {
     padding-right: 240px;
     padding-left: 10px;
   }

使用第一种方法，会有很多覆盖。同样使用第二种方法，css文件中会有很多代码。我知道两者都可以解决问题，但很想知道哪种方法最好。如果还有其他方法，请建议我。

4

3 回答 3

2

CSS 可以通过以下方式从右到左显示您的文本：

.rtl
{
direction:rtl;
}

我更喜欢在一行上处理填充和边距：

.content {
 position: relative;
 padding:5px 10px 5px 240px;
}

.rtl .content {
 padding:0 240px 0 10px;
}
于 2014-07-19T20:21:53.410 回答
2

如果您正在寻找更强大的解决方案，我建议您使用以下方法：

CSS 预处理器

学习和使用像LESS这样的 CSS 预处理器（如有必要，使用像Bi-App-Less这样的插件）并有条件地添加正确的样式表。

后端控制变量

将 CSS 与一些后端变量混合使用，例如：

  • direction: <%=rtl%>;
  • padding-<%=right%>: 10px;
  • padding-<%=left%>: 240px;.

RTL 工具

使用RTLer 工具。

于 2014-07-19T20:55:11.370 回答
1

你可以尝试做这样的事情

.content {
    width: 500px;
    padding: 5px 10px;
    border: 1px solid #ddd;
}

.content.rtl {
    float: right;
    direction: rtl;
}

尝试硬编码特定于方向的最小填充/边距，这是一个示例http://jsfiddle.net/icodeforlove/UNS5L/

于 2014-07-19T20:27:23.627 回答