2 열, 위쪽 맞춤, 고정 너비 레이아웃

Question

아이폰 앱의 WebView에서 다른 텍스트에 포함시키기 위해 일부 데이터에 대해 2 열의 상단 정렬 고정 폭 레이아웃을 만들려고합니다. 두 번째 열의 모든 항목이 깔끔하게 정렬되도록 첫 번째 열을 고정 폭으로 지정해야합니다.
저는 SO, Net에서 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