Блог

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

 #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;}
  

Золотая сетка использует:

 .inside {margin-left: 0;}
  

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

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

Для этого, безусловно, существует простое решение в формате 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.

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

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

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

 .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>
  

вы не хотите, чтобы между изображениями были ПРОБЕЛЫ! это все испортит… Я даже не уверен насчет комментариев.