改变元素之间文本选择的顺序

Question

说我有这个

div {
  position:absolute;
  top:0;
}

#right {
  left:50px;
}

#left {
  left:0;
}

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

当我从左到右选择文本时，它的行为方式不直观。至少在chrome中，从选择中考虑元素的顺序似乎取决于元素的顺序。有没有办法在不改变元素顺序的情况下改变顺序？

Answer 1

您可以使用CSS flexbox执行此操作。您所要做的就是使用CSS更改div id属性的值。

代码：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 2

试试这个。

＆＃13;

＆＃13;

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

#right {
  left:50px;
}

#left {
  left:0;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;