布置此文本的最佳方式？答案

【问题标题】：best way to lay out this text?布置此文本的最佳方式？
【发布时间】：2011-08-23 09:27:20
【问题描述】：

试图刷新我对一些 css 东西的记忆已经有一段时间了，谁能推荐实现这种布局的最佳方法

http://www.flickr.com/photos/62570778@N04/5709752069/

创建列表或浮动标题等更好吗？

谢谢

【问题讨论】：

数据是否输入到此布局中？

标签： html css

【解决方案1】：

在语义上它匹配一个定义列表 -

<dl>
  <dt>
    Name
  </dt>
  <dd>
    MyName
  </dd>
</dl>

使用 CSS 为每个部分设置您想要的样式。

【讨论】：

+1 表示不常用的定义列表。它也可以是表格数据，因此是表格。

【解决方案2】：

我可能会建议使用一系列 div。最外层定义了整个列表周围的框，每行一个框。内部的浮动左/右适当（每列一个）。

类似：

<div class="list">
    <div class="row">
        <span class="col1">Name</span>
        <span class="col2">My Name</span>
    </div>
    <div class="row">
        <span class="col1">Age</span>
        <span class="col2">21</span>
    </div>
    <div class="row">
        <span class="col1">Gender</span>
        <span class="col2">Male</span>
    </div>
</div>

使用 css 类似：

.list {
  width: 50em;
  overflow: auto;
}

.row {
  overflow: auto;
  margin-bottom: 2em;
  border-bottom-width: 1px;
  border-bottom-style: solid; 
}

.col1 {
  float: left;
  max-width: 23em;
}

.col2 {
  float: right;
  width: 25em;
}

【讨论】：

一些关于你的答案的随机 cmets：float: left（或right）forces display: block，所以你不需要display: inline。对于.col1/.col2，最好使用<span> 标签而不是<div> 标签。 .row 上不需要 display: block，因为 div 元素默认使用它。

【解决方案3】：

你可以使用<table>

<table>
<tbody>
<tr><td>Name</td><td>My Name</td></tr>
<tr><td>Age</td><td>21</td></tr>
<tr><td>Gender</td><td>Male</td></tr>

</tbody>


</table>

【讨论】：

【解决方案4】：

你也可以试试：

<ul>
<li>Name<span>value</span></li>
<li>Age<span>value</span></li>
<li>Gender<span>value</span></li>
</ul>

与

span {
  float: right;
}
li {
 width:100px;
}

【讨论】：