Question

尝试刷新我对一些事情已有很长时间的css的记忆，任何人都可以推荐实现这种布局的最佳方法

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

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

由于

Answer 1

在语义上它与定义列表匹配 -

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

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

Answer 2

您可以使用<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>

Answer 3

我可能会建议使用一系列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;
}

Answer 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;
}

布置此文本的最佳方式？

4 个答案: