Как отобразить данные с помощью макета на основе DIV?

Question

Я хочу отобразить этот тип данных, используя Divs и другие элементы, такие как ul li p, возможно, минимальные теги.

Обратите внимание , что: Там повторяющиеся блоки, и левое содержимое выровнено по правому краю, а правое содержимое выровнено по левому краю.

Пожалуйста, предоставьте хорошее решение для этого с минимальным количеством кода.

Вот ссылка на то, что я пытался сделать с UL-LI

ваздейсгн

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 класса label значение "по правому краю".

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