Как создать список из нескольких столбцов с помощью CSS?

Question

Я хочу создать фиксированный макет, который отображает некоторые изображения.например, «таблица» из 3 изображений в строке и 3 изображения в столбце.Также мне нужно, чтобы каждый li содержал некоторую фиксированную ширину и высоту, а изображение центрировалось и выравнивалось по верху.

Итак, я подумал о чем-то вроде этого:не знаю css, я все еще создал что-то подобное, но все еще не работает ...

ul {display: block; text-align: center; border:#666666 solid 1px; height: 150px; padding:0; margin:0;}
li { list-style:none; float:left; width: 150px; height: 150px; margin-bottom: 32px;}

---

Фиксированная версия:

ul{ height: 180px; text-align:center;padding:0;}
li{list-style:none;padding:0;width: 25%;height: 180px;float: left; display:inline-block;}

Примечание.только один <ul> со многими <li>, столбцы установлены с изменением ширины <li>.25% означает 4 столбца, 33% = 3 столбца и т. Д. Формула: 100 / (требуемые столбцы).

Answer 1

Я сделал коробку 3х3 с тегом списка и загрузил здесь , надеюсь, это поможет вам Sein.

CSS:

<style type="text/css">
    ul { list-style-type:none; margin:0px; padding:0px; overflow:hidden; }
    li { float:left; width:150px; height:150px; margin:2px; padding:3px; background:#CCCCCC; text-align:center; }
    li img { max-width:144px; }
</style>

HTML:

<ul>
    <li><img src="" /></li>
    <li><img src="" /></li>
    <li><img src="" /></li>
</ul>
<ul>
    <li><img src="" /></li>
    <li><img src="" /></li>
    <li><img src="" /></li>
</ul>
<ul>
    <li><img src="" /></li>
    <li><img src="" /></li>
    <li><img src="" /></li>
</ul>

Answer 2

Ты почти там, Сейн.Все, что я сделал, чтобы это работало, было удалено float: left; и заменено на display: inline-block; на теге <li>.Это выровняло все идеально для меня.Если у вас есть какие-либо проблемы с вертикальным выравниванием, попробуйте установить следующее для тегов <img>: vertical-align: top;

В блоге Mozilla WebDev есть феноменальная статья для решения этой проблемы: Кросс-браузерИнлайн-Block