0

左から右と右から左の両方のテキストを正しく処理する必要があるプロジェクトがあります。デザインでは、一部の要素が右揃えになっています。これは、rtl の場合、左揃えにする必要があることを意味します。

CSSを使用して「右」ではなく「最後」に配置する方法はありますか? ここでは特に Webkit をターゲットにしています。

私がやりたいことの例：

float: end; /* instead of float: right */

また

position: absolute;
end: 0px; /* instead of right: 0px */

明らかに、これらのどちらも実際には機能しません。

right: 0px;rtl のスタイルを設定し、それを使用してすべてをに変更できることを知っていleft: 0pxます。ここでより良い解決策を探しています。

編集：

いくつかのコンテキストでは、ページにはあらゆる種類のことを行う要素がいたるところにあります。しかし、私が今特に取り組んでいるのはメニューバーです。左側にいくつかの静的ボタン、中央に可変ブレッドクラム、右側にいくつかの静的ボタンがあります。ブレッドクラムは、通常のテキストのように流れるはずです (場合によっては、左から右または右から左)。

4

4 に答える 4

1

Flexbox は、典型的な LTR の書き方以上のものを念頭に置いて設計されました。それは、整列と正当化に関して と のflex-startような言語を特徴としています。flex-end問題の要素を説明する方法では、それらを使用する必要がない場合があります。

http://codepen.io/cimmanon/pen/bdynv (LTR と RTL の両方の例が含まれています)

<nav class="rtl">
  <img src="http://placekitten.com/100/50" alt="Cat Button" />
  <img src="http://placekitten.com/80/50" alt="Other Cat Button" />

  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>

  <img src="http://placekitten.com/100/50" alt="Cat Button" />
  <img src="http://placekitten.com/80/50" alt="Other Cat Button" />
</nav>

CSS:

nav {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  /* optional */
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

ul {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
ul li {
  display: inline-block;
}

.rtl {
  direction: rtl;
}

table/table-cell 表示プロパティを使用して同じことを実現できますが、追加の要素が必要になることに注意してください。

于 2013-11-13T20:24:47.600 に答える
0

少しの JavaScript (ここでは jQuery を使用) を使用して、テキストの方向を確認し、クラス名といくつかの CSS でフロートを調整できます。

JSFiddle の例

JS: 

$(".float-end").each(function(){
    if($(this).css("direction") === "rtl"){
      $(this).addClass("rtl");  
    }
})

CSS: 

.float-end {
    float: right;
}
.float-end.rtl {
    float: left;
}
于 2013-11-13T20:03:57.043 に答える