Div сокращается при удалении дополнения

Question

У меня есть строка divs, каждая из которых содержит одно изображение. Изображение height установлено для 100% для каждого изображения, и каждый div имеет padding-left20px, за исключением последнего div, который не имеет заполнения. Поскольку последний div не имеет прокладки, а imgwidth - 100%, последнее изображение оказывается выше других. Я хотел бы исправить это, но я не знаю, как это сделать.

Вот jsfiddle, который показывает наглядное представление проблемы.

HTML:

<div class="grid"> 
     <div class="col-1-4"> 
      <img src="" /> 
     </div> 
     <div class="col-1-4"> 
      <img src="" /> 
     </div> 
     <div class="col-1-4"> 
      <img src="" /> 
     </div> 
     <div class="col-1-4"> 
      <img src="" /> 
     </div> 
    </div> 

CSS:

img { 
     width: 100%; 

    } 

    *, *:after, *:before { 
     -webkit-box-sizing: border-box; 
     -moz-box-sizing: border-box; 
     box-sizing: border-box; 
    } 

    body { 
     margin: 0px; 
    } 

    [class*='col-'] { 
     float: left; 
     padding-right: 20px; 
    } 

    [class*='col-']:last-of-type { 
     padding-right: 0px; 
    } 

    .grid { 
     width: 100%; 
     max-width: 940px; 
     min-width: 755px; 
     margin: 0 auto; 
     overflow: hidden; 
    } 

    .grid:after { 
     content: ""; 
     display: table; 
     clear: both; 
    } 

    .col-1-4 { 
     width: 25%; 
    } 

Answer 1

Я бы переключиться на (процент на основе) маржи для желобов, например, так:

[class*='col-'] { 
    float: left; 
    margin-right: 4%; 
} 

[class*='col-']:last-of-type { 
    margin-right: 0; 
} 

.col-1-4 { 
    width: 22%; 
} 

Пример: http://jsfiddle.net/sknf7/3/

Answer 2

Это потому, что вы используете box-sizing: border-box;, вы можете удалить это или использовать запас вместо заполнения. (В любом случае вам нужно настроить сетку)

границы коробки удалены:

http://jsfiddle.net/sknf7/1/

край вместо прокладки:

http://jsfiddle.net/sknf7/2/

Answer 3

У вас есть это в вашем CSS

-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 

border-box означает, что размер элемента - его высота/ширина и его прокладка. Поэтому, если ваше изображение имеет высоту 100px с отступом 10px сверху и снизу, оно будет отображаться только на 80px. Это то, что вызывает вашу проблему.

Альтернатива content-box, где добавка добавляется к высоте или ширине. Таким образом, верхняя и нижняя часть 100px + 10px будет иметь вместо этого 120px.

Один из способов исправить это - сделать контент-бокс divs и немного узким в результате (чтобы компенсировать увеличенную ширину заполнения).

[class*='col-'] { 
    box-sizing: content-box; 
    -moz-box-sizing:content-box; 
} 
.col-1-4 { 
    width: 23%; 
} 

Answer 4

ответ Павла, конечно, работает, но вы можете подумайте над улучшением совместимости/сокращения вашего CSS, немного переработав это. Те * цв шаблонные селекторы не будет работать в IE8 или раньше

.col-1-4 { 
    width: 22%; 
    margin-right: 4%; 
    float: left; 
} 

.col-1-4:last-child 
{ 
    margin-right: 0; 
} 

выше, что Вы получите тот же эффект