垂直对齐跨度的左边

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/