垂直對齊跨度的左邊

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/