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

时间:2017-04-07 07:35:00

标签: html css

说我有这个

div {
  position:absolute;
  top:0;
}

#right {
  left:50px;
}

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

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

2 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

试试这个。

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