提问者:小点点

当相邻文本换行到多行时,我们如何确保文本不会掉下来


请检查以下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


共1个答案

匿名用户

忘记浮点数,使用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>