Question

现在我正在开发一个双语网站，并且对如何处理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文件中会有很多代码。我知道两者都会做到这一点，但很想知道哪种方法最好。如果还有其他方法，请建议我。

Answer 1

CSS可以用以下方式从右到左显示您的文字：

.rtl
{
direction:rtl;
}

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

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

.rtl .content {
 padding:0 240px 0 10px;
}

Answer 2

你可以尝试做这样的事情

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

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

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

哪种是处理RTL CSS的最佳方法

2 个答案: