2017-04-07 7 views
4

間でテキスト選択の順序は、私が左から右にテキストを選択するために行くとき、私は アルター要素

この

div { 
 
    position:absolute; 
 
    top:0; 
 
} 
 

 
#right { 
 
    left:50px; 
 
} 
 

 
#left { 
 
    left:0; 
 
}
<div id="right">World</div> 
 
<div id="left">Hello</div>
があると、それは視覚的に直感的な方法で動作します。クロムでは、少なくとも要素が選択から考慮される順序は、要素の順序に依存するように見えます。要素の順序を変更せずにその順序を変更する方法はありますか?

+0

ありません。 – Martijn

+0

@Martijn要素が動的に追加/削除されたり、パフォーマンスのDOM変更を最小限に抑えるためにほとんどリサイクルされているため、1行になるテキストを選択しようとすると意味をなさないクレイジーパターンになりがちです。 – user81993

答えて

0

これはCSS flexboxを使用して行うことができます。 CSSでdiv idプロパティの値を変更するだけです。

コード:

#blockContainer > div { 
 
    border: 1px dashed #000; 
 
} 
 

 
#blockContainer { 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: box; 
 
    
 
    -webkit-box-orient: vertical; 
 
    -moz-box-orient: vertical; 
 
    box-orient: vertical; 
 
} 
 
#right { 
 
    -webkit-box-ordinal-group: 3; 
 
    -moz-box-ordinal-group: 3; 
 
    box-ordinal-group: 3; 
 
} 
 
#left { 
 
    -webkit-box-ordinal-group: 1; 
 
    -moz-box-ordinal-group: 1; 
 
    box-ordinal-group: 1; 
 
}
<div id="blockContainer"> 
 
    <div id="right">World</div> 
 
    <div id="left">Hello</div> 
 
</div>

JsFiddle - http://jsfiddle.net/hbk05z8n/

+0

OPの例と同じ行で、このアプローチは対応できますか?...フレキシブルなものはありませんか?こんにちは – mayersdesign

+0

@mayersdesign、申し訳ありません、私は友達を更新しました:) –

0

これを試してみてください。順序を変更すると移動するための方法だので、あなたは、順序を変更することはできませんなぜ告げず

div { 
 
float:left; 
 
padding-right:2px; 
 
} 
 

 
#right { 
 
    left:50px; 
 
} 
 

 
#left { 
 
    left:0; 
 
}
<div> 
 
    <div id="right">World</div> 
 
    <div id="left">Hello</div> 
 
</div>