如何使用基于DIV的布局显示数据？

Question

我想使用Div和其他元素显示这种类型的数据，例如ul li p span可能是最小标签。

注意：可重复的块和左内容右对齐，右内容左对齐。

请用最少的代码为此提供良好的解决方案。

以下是我尝试用UL-LI做的链接

wazdeisgn

Answer 1

<dl>
<dt>user</dt><dd>3234234234234</dd>
<dt>something</dt><dd>3234234234234</dd>
<dt>wharever</dt><dd>3234234234234</dd>
</dl>

dl { float: left; width: 300px; height: auto; margin-bottom: 5px; }
dt { float: left; width: 100px; height: auto; text-align:right; }
dd { float: right; width: 200px; height: auto; text-align:left; }

当然你之前应该有一个很好的“css重置”，因为默认的填充和边距不会影响你的盒子模型。

Answer 2

首先，将标签放在div或span容器中，并将值放在它们自己的容器中。为标签指定一个类，例如“label”。

接下来，在你的css中，向左浮动标签并给它们一个固定的宽度。将标签类的text-align属性设置为“right”。

如果您认为值将换行到下一行，则还将值容器浮动;这将阻止它们包裹在与标签相同的垂直空间中。如果你这样做，请确保每个标签也有明确的：左应用，以便它自己开始。