雙列頂部對齊固定寬度佈局

Question

我正在嘗試爲iPhone應用程序的WebView中的其他文本嵌入一些數據來創建兩列頂部對齊的固定寬度佈局。我需要第一列的寬度是固定的，這樣第二列的所有項目纔會整齊排列。
我已經嘗試了很多來自SO和網絡的解決方案，使用HTML，CSS或兩者，並且總是失敗。列寬不保留且條目不頂對齊。

內容例如：

在第一列：

Address 
Distance 
Ticket price 

在第二列：

12-26-3 Kami Itabashi, Itabashi-ku, Tokyo 
23km 
350 Yen 

這是我的第一個問題，所以請憐憫。

我可以根據需要提供我的CSS樣式表。

Answer 1

嘛，問題是不明確的，但無論如何：

HTML

<div class="frame"> 
    <div class="l"> 
     <p>Address</p> 
     <p>Distance</p> 
     <p>Ticket<span>price</span></p> 
    </div>  
    <div class="r"> 
     <p><span class="number">12-26-3</span>Kami Itabashi, Itabashi-ku, Tokyo </p> 
     <p><span class="number">23km</span></p> 
     <p><span class="number">350</span>Yen</p> 
    </div>  

</div>  

CSS

p{ 
    height:20px; 
    color:#000000; 
    margin: 20px 0px; 
    color:#000000; 
} 
.frame{ 
    width:310px; 
    height:150px; 
    background:#A0A0A0; 
} 
.number{ 
    color:#8D0000; 
} 
.l{ 
float:left; 
} 

.r{ 
    width: 220px; 
    float:right; 
} 

JSFIDDLE