Question

我正在尝试创建一个双列，顶部对齐的固定宽度布局，以便将某些数据嵌入到Web应用程序的WebView中的其他文本中。我需要第一列具有固定宽度，以便第二列中的所有项目都整齐排列我已经尝试过使用HTML，CSS或两者的SO和网络的许多解决方案，并且总是失败。不保留列宽，条目不能顶对齐。

内容示例：

在第一栏：

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

两列，顶部对齐，固定宽度布局

1 个答案: