Как отображать данные с DIV-макетом?

Question

Я хочу отобразить этот тип данных, используя Divs и другие элементы, такие как 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, а значения в их собственный контейнер. Присвойте меткам класс, такой как «метка».

Затем, в вашем CSS, поместите метки влево и присвойте им фиксированную ширину. Установите для атрибута text-align класса label значение «right».

Перемещайте контейнер значений влево также, если вы думаете, что значения будут перенесены на следующую строку; это остановит их от размещения в том же вертикальном пространстве, что и метка. Однако, если вы сделаете это, убедитесь, что каждая метка также имеет значение clear: left применено, чтобы оно начиналось с отдельной строки.