Эластичный макет - Обеспечение выравнивания всегда

Question

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

Код

http://jsfiddle.net/N3VRM/3

http://jsfiddle.net/N3VRM/3/embedded/result/

проблема

Я всегда хочу, чтобы крайние левые розовые сетки совпали с крайним левым краем страницы и совпадали с правой стороной. В настоящее время на розовых квадратах всегда есть дополнительный запас в 1%, что означает, что они не совпадают с текстом "тестирования".

Неверное решение

Единственное решение, которое я могу придумать, - это наложить 1% маржи на весь контент, который не является розовой сеткой, чтобы они оба выровнялись (то есть на тестовом тексте), но на моем производственном сайте это будет сделано Ужасный беспорядок. Использование JavaScript также будет неверным решением

Возможное решение

Возможно, для этого можно использовать правило n-го элемента CSS для разных разрешений, как показано ниже, но мне кажется, что оно не работает правильно:

@media (max-width: 1200px) {
    .thumb:nth-child(3n+3) {
        width:21%;
    }
}

Я просто знаю, что есть действительно умное, элегантное решение, и я не могу понять это. Очки идут за самое чистое, наиболее совместимое решение.

Answer 1

Вы могли бы взглянуть на способы, чтобы оправдать выравнивание ваших ящиков и использовать display:inline-block; вместо float или дисплей: гибкий.

Он отправит в крайний правый и крайний левый первый и последний прямоугольник каждой строки. но ящики не будут отправлены на последней строке с таким же полем и нарушат внешний вид столбца.

display:inline-block а также text-align:justify: http://jsfiddle.net/N3VRM/4/

display:flex а также flex:wrap а также justify-content:space-between: http://jsfiddle.net/N3VRM/5/

---

Но то, что выглядит близко к вашим потребностям, это использование селектора nth-child(n) для подсчета и сброса определенного поля для выбранных полей.

Итак, давайте проверим: .thumb:nth-child(4n) {margin-left:0;} .thumb:nth-child(4n+1) {margin-right:0;}

http://jsfiddle.net/N3VRM/6/

это количество должно быть сброшено и установлено для каждого медиазапроса.

Посмотрите в последней связанной скрипке, переключение цвета тени с помощью mediaquerie.