请检查以下plnkr中的问题陈述。
http://plnkr.co/edit/ojt3l3ljnyoa6hdq
null
.d {
width: 200px;
background: red;
text-align: center;
>div {
display: inline
}
}
.a {
float: left;
}
.c {
float: right;
top: 0;
position: relative
}
.b {
float: none;
margin: 0 auto;
}
<h1>How do we get c to take top-right position!</h1>
<div class="d">
<span class="a">a</span>
<span class="b">basdsadjkasdl ksaalsdk jsald kjsaldkajsdlaks</span>
<span class="c">c </span>
</div>
null
忘记浮点数,使用flexbox,并将d
设置为display:flex
null
.d {
display: flex;
width: 200px;
background: red;
text-align: center;
}
<div class="d">
<span class="a">a</span>
<span class="b">basdsadjkasdl ksaalsdk jsald kjsaldkajsdlaks</span>
<span class="c">c </span>
</div>