CSS пересчитать nth-child

Question

У меня есть галерея изображений с раскладкой из двух столбцов. Галерея изображений может содержать 1 колоночную ширину изображений между изображениями из двух столбцов.

Смотрите мой Codepen Пример:

<div class="gallery"> 
    <img src="http://nosrc.io/200x200"> 
    <img src="http://nosrc.io/200x200"> 
    <img class="large" src="http://nosrc.io/400x200"> 
    <img src="http://nosrc.io/200x200"> 
    <img src="http://nosrc.io/200x200"> 
    <img src="http://nosrc.io/200x200"> 
    <img src="http://nosrc.io/200x200"> 
    <img class="large" src="http://nosrc.io/400x200"> 
    <img src="http://nosrc.io/200x200"> 
    <img src="http://nosrc.io/200x200"> 
    <img src="http://nosrc.io/200x200"> 
    <img src="http://nosrc.io/200x200"> 
</div> 

http://codepen.io/anon/pen/JdgBOb

Почему :nth-child выбрать неправильные детали галереи после второй полной ширины изображения? Обычно все изображения в левой колонке должны иметь margin-left: 0;, а все изображения в правой колонке должны иметь margin-left: 2%;.

P.S. Я не могу использовать JavaScript.

Answer 1

Чтобы действительно получить эту работу должным образом (предполагается, что размеры изображения могут быть динамическими), вы будете необходимо использовать .large:nth-of-type(...) ~ img, и он будет довольно сложным (не говоря уже о том, что он может не работать в некоторых старых браузерах). Более простым решением было бы использовать 1% -ный запас для всех изображений: http://codepen.io/Godwin/pen/MwNBMK.

Answer 2

проверить. Это говорит:

.gallery img:nth-child(2n+1) { 
     margin-left: 0; 
} 

и:

.gallery img.large ~ img:nth-child(2n+1) { 
    margin-left: 2%; 
} 

в (2n+1) изменения в каком положении использует атрибут

Answer 3

Не было этого хватает? Я знаю, но что Theres ненужную правого края каждой строки изображения, но ..

http://codepen.io/anon/pen/qdeyzP

Я также взял на себя смелость рефакторинга, что странно поплавка поляну.

.gallery { 
    width: 400px; 
    overflow: hidden; 
} 

Insetad из bloaty:

.gallery::before, 
.gallery::after { 
     content: " "; 
     display: table; 
} 

.gallery::after { 
     clear: both; 
} 
` 

Поскольку overflow: hidden является pretty good clearfix сама по себе.

Answer 4

Не думаю nth-child делает, что вы думаете, что он делает. Это не nth-child относительно элемента .large; это касается всех детей img.gallery. Если вы используете инспектор стиля и изучаете стили, применяемые к каждому img, вы должны уметь видеть, что я имею в виду.

Вы можете попробовать правило так:

.gallery img { 
    float: left; 
    width: 48%; 
    margin-right: 2%; 
    margin-bottom: 2%; 
} 

.gallery img.large { 
    width: 98%; 
} 

См http://codepen.io/anon/pen/NqQLYx.