4

現在、私はバイリンガル Web サイトに取り組んでおり、RTL CSS コードの処理方法について少し混乱しています。私は次のように2つのことを考えています。

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;
   }

最初の方法を使用すると、多くのオーバーライドが発生します。また、2 番目の方法を使用すると、css ファイルに多くのコードが含まれます。どちらもうまくいくことはわかっていますが、どちらが最善の方法なのか知りたいです。また、別の方法があれば教えてください。

4

3 に答える 3

2

CSS は、次のようにテキストを右から左に表示できます。

.rtl
{
direction:rtl;
}

パディングとマージンを 1 行で処理することを好みます。

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

.rtl .content {
 padding:0 240px 0 10px;
}
于 2014-07-19T20:21:53.410 に答える
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 に答える