Как я могу отобразить список в стиле x by y?

Question

То, что я хочу сделать, это похоже на то, что делается здесь http://www.starbucks.com/static/reference/styleguide/layout_promo_c.aspx

Я корпел над CSS и HTML, пытаясь понять, как им удается отобразить список в 2 по 2 формы а.

Я выяснил, что они используют упорядоченный список для его организации, а затем содержимое каждого блока, структурированного с использованием элемента dl. Мне удалось создать 4 отдельных блока, но я не могу получить их в структуре 2 на 2. Я также, похоже, не могу сделать список встроенным, несмотря на то, что он имеет свойство display.

изменения: изменилась налили корпели

Вот соответствующая часть моей CSS http://pastebin.com/zLSNu29b Вы могли бы также игнорировать его:/

Может кто-нибудь мне помочь, пожалуйста?

Answer 1

Это не звучит сложно ... Я бы сделал, чтобы четыре блока внутри div были ограничены шириной и давали процентную ширину для каждого из этих четырех блоков, каждый из которых плавал до оставил.

Помните, что если вы назначаете 50% ширины для одного блока, то справа от него должно быть около 48% ширины, потому что вы должны включать в себя поля (-ы) и отступы, поэтому иногда, когда вы иметь div 1000px и вы оцениваете 500px для ребенка и 500px для другого ребенка, второй - ниже первого.

Вы понимаете?

Answer 2

Элементы списка перемещаются слева, так что они будут выстраиваться рядом друг с другом, пока они не будут охватывать ширину контейнера, а затем следующие две ниже ниже первого и так далее.

Они могут использовать ширину 50%, но при этом указывая горизонтальную прокладку, применяя box-sizing: border-box; к элементам списка, которые изменяют способ вычисления ширины, чтобы включить границу и отступы в определении ширины. Это свойство css3, поэтому оно не будет работать в старых браузерах.