改變了不同元素

文本選擇的順序說我有這個改變了不同元素

div { 
 
    position:absolute; 
 
    top:0; 
 
} 
 

 
#right { 
 
    left:50px; 
 
} 
 

 
#left { 
 
    left:0; 
 
}

<div id="right">World</div> 
 
<div id="left">Hello</div>

當我去選擇文本從左至右，它的行爲在視覺上直觀的方式。至少在Chrome中，元素從選擇中被考慮的順序似乎取決於元素的順序。有沒有辦法改變這個順序而不改變元素的順序？

來源

2017-04-07 user81993

不是沒有告訴你爲什麼不能更改順序，因爲改變順序似乎要走的路。 – Martijn

@Martijn元素被動態地添加/刪除或大部分被回收，以最大限度地減少DOM的性能變化，他們往往最終成爲瘋狂的模式，當試圖從單一行中選擇文本時，這種模式根本毫無意義 – user81993

您可以使用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/

來源

2017-04-07 07:44:28

他們是在OP的例子中，在同一行上，這種方法是否可以適應？...並且是否有任何flexbox無法做到的事情？！哈哈 – mayersdesign

@mayersdesign，對不起，我更新了隊友:) –

試試這個。

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

 
#right { 
 
    left:50px; 
 
} 
 

 
#left { 
 
    left:0; 
 
}

<div> 
 
    <div id="right">World</div> 
 
    <div id="left">Hello</div> 
 
</div>

來源

2017-04-07 08:12:14

改變了不同元素

回答

相關問題