Question

我试图将跨度的左侧与前一个跨度的右端对齐，但它不起作用。

这是一个简化的例子： https://jsfiddle.net/regc/udjgufrz/

<span class="big">start big</span>
<span class="small">continue with smaller ones. continue with smaller ones. continue with smaller ones. </span>

我希望较小的文字垂直对齐较大的文字。

BIGGER smaller text
       smaller text

我尝试过使用div，但在这种情况下，较小的文字从新行开始。

Answer 1

检查以下更新的小提琴，希望它有所帮助。我使用了position:absolute;

vertically align span's left Fiddle Demo

Answer 2

好的，垂直对齐，可能是这样的：

.wrap span {
  display: inline-block; vertical-align: middle; width:49.5%;
}
.big {
  font-size:50px;
}

.small {
  font-size:30px;
}

<div>
  <p>here it is:</p>
  <div class="wrap">
      <span class="big">start big</span>
      <span class="small">continue with smaller ones. continue with smaller ones. continue with smaller ones. </span>
  </div>
</div>

但我会使用Flexbox。这是一个选择吗？

Answer 3

只需为float:left类添加.big。

.big {
  font-size:50px;
  float:left;
  margin-right:10px;
}

https://jsfiddle.net/udjgufrz/3/

垂直对齐跨度的左侧

3 个答案: