divの現在の方向を検出

Question

divの方向は、それがホストするコンテンツ（dir="auto"を使用）によって決定されます。私は方向を決定し、それに応じて削除範囲の絶対位置を変更するために、CSS（JavaScriptよりも不可能な場合）を使用したいと思います。

はこのバイオリンはこちらをご覧：https://jsfiddle.net/psjgsnby/

<div dir="auto" class="item"> 
    text 
    <span>x</span> 
</div> 
<div dir="auto" class="item"> 
    מימין לשמאל 
    <span>x</span> 
</div> 

CSS：クロスブラウザで動作します

.item span:dir(rtl) { 
    right: auto; 
    left: 0; 
} 

何か：

.item { 
    position: relative; 
    width: 200px; 
} 
.item span { 
    position: absolute; 
    right: 0; 
    top: 0; 
} 

私はthis selectorような何かを探しています（上記はFirefox用です）

Answer 1

私は解決策を見つけましたが、あなたのコードから非常に遠いです。その基本はdisplay: tableです。すべての要素に対して動的方向のフローが必要なためです。 異なる位置の縦線を変更できることを忘れないでください。 dir="auto"を使用

.item { 
 
    display: table; 
 
    width: 200px; 
 
    height: 50px; 
 
} 
 

 
.item .btn, 
 
.item .content { 
 
    display: table-cell; 
 
} 
 

 
.item .btn { 
 
    vertical-align: top; 
 
} 
 

 
.item .content { 
 
    width: 100%; 
 
    vertical-align: bottom; 
 
}

<div dir="auto" class="item"> 
 
    <span class="content">text</span> 
 
    <span class="btn"> 
 
    x 
 
    </span> 
 
</div> 
 
<div dir="auto" class="item"> 
 
    <span class="content">מימין לשמאל</span> 
 
    <span class="btn"> 
 
    x 
 
    </span> 
 
</div>

Fiddle demo

Answer 2

要素の内容に基づいて、ブラウザに方向を使用する検出に所有権を与えます。

実装に基づいて、different browsers might give different resultsに注意してください。

dir=auto実際tells the browser to：

要素の最初の強く型付けされた文字を見て、要素の基本方向がどうあるべきかとはうまく。それがヘブライ（またはアラビア語など）文字の場合、要素はrtlの方向を取得します。それがラテン文字であれば、方向はltrになります。

CSSでは、これを確認するオプションはありませんが、javascriptを使用する場合は、まったく同じことを試みることができます。強く型付けされた最初の文字を見つけ、それに基づいて関連する方向を使用します。ここで得られる唯一の質問は、サポートしたい言語です。

Answer 3

コンテナの表示をフレックスに変更すると、これは簡単に実現できます。あなただけの正当化・コンテンツを必要とする：スペース間：

CSSがさらにコンパクトであるあなたが持っていたものということ：

.item { 
 
    position: relative; 
 
    display: flex; 
 
    width: 200px; 
 
    justify-content: space-between; 
 
}

<div dir="auto" class="item"> 
 
text 
 
<span>x</span> 
 
</div> 
 
<div dir="auto" class="item"> 
 
מימין לשמאל 
 
<span>x</span> 
 
</div>