Сверстать портфолио

[IvanRu08]

Верстаю очередной макетик-портфолио. Столкнулся с проблемой. Идут 16 картинок, по 4 вряд. Указываю для класса .works margin: 40px 0 40px 0;

Получается что и у 4, 8, 12, 16 блоков есть отступ справа 40. Они как бы выступают из основного контейнера. С помощью nth-child убираю этот отступ. Есть другой способ? Так как при добавлении еще n количества работ придется дописывать css

Вот сама работа: http://cm04741.tmweb.ru/

Edited August 15, 2015 by IvanRu08

[lexxcode]

Ну так как у тебя настроен css, то у тебя ничего не сломается, если добавить еще элементы. У тебя же

.work:nth-child(4n+4) {    margin-right: 0;}

Не самый универсальный подход. Но если ты 100% уверен, что у тебя будет именно такая сетка, и всегда одинаковые элементы в ней, то это вполне рабочий вариант.

[Nick16]

Я знакомиться с вебом только начал, но как насчет того, чтобы отдельный класс создать для этих вот четвертых в строке блоков? 

[lexxcode]

  On 8/15/2015 at 2:08 PM, Nick16 said:

Я знакомиться с вебом только начал, но как насчет того, чтобы отдельный класс создать для этих вот четвертых в строке блоков? 

Чел который будет делать из этого шаблон, или вешать на cms, будет прокленать тебя за это  

[IvanRu08]

  On 8/15/2015 at 2:08 PM, alexriz said:

Ну так как у тебя настроен css, то у тебя ничего не сломается, если добавить еще элементы. У тебя же

.work:nth-child(4n+4) {    margin-right: 0;}

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

Ага, уже поправил, спасибо.

  On 8/15/2015 at 2:08 PM, Nick16 said:

Я знакомиться с вебом только начал, но как насчет того, чтобы отдельный класс создать для этих вот четвертых в строке блоков? 

Не вариант, а если этих блоков будет 50? 50 отдельных классов создавать что ли?)

[lexxcode]

  On 8/15/2015 at 2:12 PM, IvanRu08 said:

Не вариант, а если этих блоков будет 50? 50 отдельных классов создавать что ли?)

 

не, класс можно сделать один типа .work-last, и добавить его каждому четвертому блоку. Но просто потом, когда программист будет выводить этот контент, вместо того чтобы на морозе валить это в цикле, придется добавлять дополнительную проверку, на каждую четвертую итерацию, чтобы добавить этот класс. 

[Sensei]

http://jsfiddle.net/hahx973j/

[antonKar]

  On 8/15/2015 at 2:08 PM, alexriz said:

Но если ты 100% уверен, что у тебя будет именно такая сетка, и всегда одинаковые элементы в ней, то это вполне рабочий вариант

В чём проблема поправить 1 строку в css, если захочется поменять сетку?

 

А вообще ТС бы воздуха по бокам добавить, всё липнет к краям на маленьком монике. 

Edited August 15, 2015 by antonKar

[IvanRu08]

  On 8/15/2015 at 2:37 PM, antonKar said:

А вообще ТС бы воздуха по бокам добавить, всё липнет к краям на маленьком монике. 

Адаптивность нужно делать, займусь этим позже 

[lexxcode]

  On 8/15/2015 at 2:37 PM, antonKar said:

В чём проблема поправить 1 строку в css, если захочется поменять сетку?

Тут дело в том, что, по большому счету, эта сетка в принципе не очень универсальна. Ну да если нужно будет из нее же сделать такого же принципа сетку 3x3, то да достаточно будет подправить пару строк кода и оно будет работать.

 

Просто что сетка может быть и сложнее, тебе может стоять надобность в элементе сетки который будет занимать две ячейки, а в то время как остальные останутся такие же. Тогда в такой реализации как сейчас это станет проблемой, т.к. :nth-child(4n+4) не прокатит. Тогда придется строить сетку на другом принципе. А если еще и адаптивность нужна, то тем более.

Например на inline-block http://jsfiddle.net/alexriz/x2tzvd1L/

Или более современный вариант на flex-box: http://jsfiddle.net/alexriz/t8jdqdz1/

Или хотя бы уже как в bootstrap сделано

 

Но да, простую адаптивность можно и в таком варианте сделать, конечно.

[antonKar]

  On 8/15/2015 at 3:00 PM, alexriz said:

Просто что сетка может быть и сложнее, тебе может стоять надобность в элементе сетки который будет занимать две ячейки, а в то время как остальные останутся такие же

ИМХО проблемы надо решать по мере их поступления.

 

А вообще если ТС задаст просто margin: 20px, то у него будет решена и проблема с его отсупами, и с прилипанием элементов к краям, не понимаю из-за чего вообще сыр-бор.

[IvanRu08]

  On 8/16/2015 at 4:06 AM, antonKar said:

А вообще если ТС задаст просто margin: 20px, то у него будет решена и проблема с его отсупами, и с прилипанием элементов к краям, не понимаю из-за чего вообще сыр-бор.

Не много не понял. Про какой отступ вы говорите? В макете левый отступ между изображениями именно 40px 

[lexxcode]

  On 8/16/2015 at 4:06 AM, antonKar said:

А вообще если ТС задаст просто margin: 20px, то у него будет решена и проблема с его отсупами, и с прилипанием элементов к краям, не понимаю из-за чего вообще сыр-бор.

Если он задаст 20px маргин, то у него сетка отойдет от краев внутрь на 20px 

[antonKar]

  On 8/16/2015 at 7:15 AM, IvanRu08 said:

Про какой отступ вы говорите?

Про правый. И вообще все.

 

 

 

  On 8/16/2015 at 7:15 AM, IvanRu08 said:

В макете левый отступ между изображениями именно 40px 

Вот у вас и будет 40 пикселей между изображениями, и по 20 пикселей по бокам, чтобы не липло к краям браузера. 

 

  On 8/16/2015 at 7:52 AM, alexriz said:

Если он задаст 20px маргин, то у него сетка отойдет от краев внутрь на 20px

Родителя в любом случае расширять придётся. 

Edited August 16, 2015 by antonKar

[lexxcode]

  On 8/16/2015 at 7:53 AM, antonKar said:

Родителя в любом случае расширять придётся.

только вот расширять родителя можно влево,  но не вправо. 

то есть технически можно и вправо расширить, но не стоит... 

[antonKar]

  On 8/16/2015 at 7:56 AM, alexriz said:

только вот расширять родителя можно влево,  но не вправо

Не понял что вы имеете в виду 

[lexxcode]

  On 8/16/2015 at 8:18 AM, antonKar said:

Не понял что вы имеете в виду 

А при чем тут это? Мы же говорим, о том, чтобы сделать отступы между ячейками сетки? 

[antonKar]

Ой, всё, вот прям такая лень объяснять по кругу одно и то же, что я уже говорил ранее.

 

  On 8/16/2015 at 4:06 AM, antonKar said:

А вообще если ТС задаст просто margin: 20px, то у него будет решена и проблема с его отсупами, и с прилипанием элементов к краям, не понимаю из-за чего вообще сыр-бор.

 

[lexxcode]

Что-то ты меня совсем запутал ахахах 

 

Если он задаст margin: 20px; то у него получится между ячейками сетки по 40px, а от краев контейнера отступ 20px. Как я понял, ему нужно, чтобы крайние ячейки не отступали от границ контейнера

[antonKar]

  On 8/17/2015 at 8:15 AM, alexriz said:

Как я понял, ему нужно, чтобы крайние ячейки не отступали от границ контейнера

Да, верно, но при этом у него есть момент с тем, что блоки в таком случае будут прилипать к границам браузера на маленьком разрешении.

 

Есть 2 стула варианта:

1) Просто убираем отступ справа и родителю делаем отступы по бокам;

2) Делаем по 20 пикселей для ячеек, в таком случае крайние ячейки будут отступать от границ контейнера, но при этом они не будут прилипать к границам браузера.

 

ИМХО второй способ проще и более поддерживаемый в будущем.

[lexxcode]

А все понял, о чем ты. Ну тут правильнее настраивать сам скелет страинцы, чтобы он не лип к краям. Это, в общем-то, не столько проблема именно сетки, это проблема скелета.