双列顶部对齐固定宽度布局

我正在尝试为iPhone应用程序的WebView中的其他文本嵌入一些数据来创建两列顶部对齐的固定宽度布局。我需要第一列的宽度是固定的，这样第二列的所有项目才会整齐排列。
我已经尝试了很多来自SO和网络的解决方案，使用HTML，CSS或两者，并且总是失败。列宽不保留且条目不顶对齐。双列顶部对齐固定宽度布局

内容例如：

在第一列：

Address 
Distance 
Ticket price

在第二列：

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

这是我的第一个问题，所以请怜悯。

我可以根据需要提供我的CSS样式表。

来源

2013-07-16 Urashima Taro

请的jsfiddle！ – GilbertOOl

创建一个基本的[小提琴]（http://jsfiddle.net/）了解代码中出现了什么问题 – swapnesh

可以给我你的屏幕图像的链接 –

嘛，问题是不明确的，但无论如何：

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

来源

2013-07-16 07:34:03 Pumpkinpro

谢谢，Pumpkinpro。我自己解决了这个问题，但你的解决方案更清洁。 –

我的荣幸;-) – Pumpkinpro

双列顶部对齐固定宽度布局

回答

相关问题