Как сделать CSS для сетки изображений

Question

Я хотел бы создать сетку изображений, и я столкнулся с тем, что, по моему мнению, должно быть самой распространенной проблемой для сетки: а именно, что как убрать отступ / отступ для последних элементов? Я пытался (безуспешно):

#page {
margin: 0 -8px -8px 0;
}

#page a {
float: left;
margin: 0 8px 8px 0;
}

Почему этот код не работает?Какой лучший способ решить это?

Фреймворки CSS заставляют нас указывать последние элементы:

960.gs использует:

.alpha {
  margin-left: 0;
}

.omega {
  margin-right: 0;
}

BluePrint CSS использует:

.last {margin-right: 0;}

Golden Grid использует:

.inside {margin-left: 0;}

Но как я могу это сделать, когда у меня есть только неизвестный список изображений, которые я хотел бы поместить в n-столбцы?Раньше я писал для этого PHP-код и вызывал его с аргументом для числа столбцов, но для этой проблемы должен быть какой-то очень простой трюк CSS!

(ссылка на живую страницу удалена, как jsfiddleпримеры ниже намного лучше)

Answer 1

Существует определенно простое решение CSS / HTML для этого.Вам не нужно нуждаться в , чтобы жестко кодировать стиль с помощью php, делать математические вычисления или использовать javascript:

http://jsfiddle.net/Madmartigan/34UCn/5/

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

HTML:

<div class="wrapper">
    <div>
        <img><img><img><img><img><img>
    </div>
</div>

CSS:

.wrapper {
    overflow:hidden;
    width:320px;
}
.wrapper div {
    /* any width up to (total img width) * (num_columns) */
    /* the rest will be chopped off by overflow:hidden */
    width:330px;

    /* chops off top "padding" of inner div (first row imgs top margin) */
    margin-top:-10px;
}
img {
    width:100px;
    height:75px;
    float:left;
    margin:10px 10px 0 0;
}

Надеемся, что этот эффект вы ищете.Это не будет работать с изображениями переменного размера, но в вашем примере все они выглядят одинакового размера.Протестировано в IE6, IE8 и FF4.

Answer 2

.divclass {
    width:320px;
    float:left;
}
.maincol {
    width:100px;
    border-color:transparent;
    border-style:solid;
    border-width-right:10px;
    border-width-left:0px;
    border-width-top:0px;
    border-width-bottom:0px;
    margin:0px;
    padding:0px;
}
.rightcol {
    width:100px;
    border-color:transparent;
    border-style:solid;
    border-width:0px;
    margin:0px;
    padding:0px;
}
<div class="divclass"><!--
--><img class="maincol"><img class="maincol"><img class="rightcol"><br><!--
--><img class="maincol"><img class="maincol"><img class="rightcol"><br><!--
--><img class="maincol"><img class="maincol"><img class="rightcol"><br><!--
--><img class="maincol"><img class="maincol"><img class="rightcol"><br><!--
--><img class="maincol"><img class="maincol"><img class="rightcol"><br><!--
--><img class="maincol"><img class="maincol"><img class="rightcol"><br><!--
--><img class="maincol"><img class="maincol"><img class="rightcol"><br><!--
--><img class="maincol"><img class="maincol"><img class="rightcol"><br><!--
--><img class="maincol"><img class="maincol"><img class="rightcol"><br><!--
--></div>

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

Answer 3

Для этого afaik не существует простого решения CSS.Вы должны либо использовать javascript для математики, либо использовать php, как вы сказали.

Редактировать: Есть селектор типа nth-child(), но я не уверен в совместимости.Вы можете прочитать больше об этом здесь и проверить совместимость здесь или просто Google для получения дополнительной информации;) На самом деле также jQuery использует селекторы CSSтак что вы можете проверить больше примеров на jQuery api .

Edit2: Э-э, я действительно забыл, что nth-child() в любом случае бесполезен, потому что вы этого не делаетезнать n.Итак, вернемся к моему первоначальному ответу: Вы не можете сделать это без каких-либо сценариев, если хотите динамическое поведение. Конечно, вы можете использовать этот nth-селектор, но только в том случае, если вы знаете, что у вас будетнекоторое известное количество изображений в одном ряду.