CSS中的右浮动优先级

Question

有

.right { float: right }
.suffix { background:pink }
.container { background:lightblue }
.container::after {content:'>>'; background: lightblue; float: right; }
.container::before {content:'<<'; background: lightblue; float: left; }

<div class="container">
  Offer Title
    <div class="right suffix">ID  

如何在ID 之前使>>显示

http://codepen.io/serhio/pen/EyZyZa?editors=1100

Answer 1

Flexbox可以做到这一点：

.right {
  margin-left: auto;
}
.suffix {
  background: pink
}
.container {
  background: lightblue;
  display: flex;
}
.container::after {
  content: '>>';
  background: lightblue;
}
.container::before {
  content: '<<';
}

<div class="container">
  Offer Title
  <div class="right suffix">ID</div>
</div>

Answer 2

而不是使用:after容器将其用于.suffix

.right {float: right}
.suffix {background:pink;}
.container{background:lightblue}
.suffix::after {content:'>>'; background: lightblue; float: right; }

<div class="container">
  Offer Title
    <div class="right suffix">ID  

Answer 3

使用：before而不是：after

https://jsfiddle.net/ex3ntia/4pn4jwn8/

.container::before {content:'>>'; background: lightblue; float: right; }

Answer 4

以下是position

的更新

＆＃13;

＆＃13;

.right {position: absolute; right: 33px; top:0;}
.suffix {background:pink;}
.container{background:lightblue;  position: relative;}
.container::after {content:'>>'; background: lightblue; position: absolute;right: 0; width: 30px; text-align:center;}

＆＃13;

<div class="container">
  Offer Title
    <div class="right suffix">ID New

＆＃13;

＆＃13;

＆＃13;