Столбец Webkit CSS3 добавляет дополнительное дополнение к контейнеру.

Я создал раскладку нескольких столбцов CSS3 для галереи изображений, которая хорошо выглядит в Firefox.

HTML:

<section id="featured">
<article>
    <img src="http://sheepy.me/incoming/images/posts/blog/thumb_tim-burton-pokemans.png" />
</article>
<article>
    <img src="http://sheepy.me/incoming/images/posts/blog/thumb_hem-tourniquet.png" />
</article>
<article>
    <img src="http://sheepy.me/incoming/images/posts/blog/thumb_hem-tourniquet.png" />
</article>
<article>
    <img src="http://sheepy.me/incoming/images/posts/blog/thumb_tim-burton-pokemans.png" />
</article>
<article>
    <img src="http://sheepy.me/incoming/images/posts/blog/thumb_tim-burton-pokemans.png" />
</article>

css:

#featured {
    width: 730px;
    padding: 20px;
    -webkit-column-count: 2;
    -webkit-column-gap: 10px;
    -webkit-column-fill: balance;
    -moz-column-count: 2;
    -moz-column-gap: 10px;
    -moz-column-fill: balance;
    column-count: 2;
    column-gap: 10px;
    column-fill: balance;
    background: #7d90a5;
}

article {
    width: 300px;
    display: block;
    background: #344252;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
    padding: 10px;
    width: 335px;
    margin-bottom: 20px;
}

article img{
    width: 335px;
    display: block;
}

Проблема заключается в том, что когда я использую браузер Chrome, чтобы открыть его, он добавляет дополнительное пространство в нижней части <section>, которое я не собираюсь его исправлять. Я искал в Интернете и нашел этот поток, но я не уверен, что это та же проблема.

Проверьте эту ссылку fiddle и попробуйте открыть ее с помощью Chrome и Firefox.

Ответ 1

Попробуйте этот CSS

#featured 
{
    overflow:hidden;        
}

Ответ 2

Быстрое исправление, нацеленное только на -webkit-браузеры

#featured {
    -webkit-margin-after: -110px;
}

Ответ 3

В каждой статье 20px используется нижний край, и заполнить контейнер в 20px,

Смотрите fiddle

#featured {
   padding: 20px 20px 0 20px
 ...}

Ответ 4

Если я правильно понимаю вопрос, попробуйте...

#featured{
   padding: 20px 20px 0 20px;
   ...
}

и

#article{
   display: inline-block;
   ...
}

Ответ 5

Альтернатива использованию {display: inline-block}

article {
-webkit-column-break-inside: avoid;
          page-break-inside: avoid;
               break-inside: avoid;
}

Источник: Аналогичный вопрос, CSS-трюки

Ответ 6

Не используйте свойство column-break-inside: avoid; any margin или padding, border just margin-bottom, я думаю, это лучшее решение для этой проблемы. http://jsfiddle.net/SdtP5/3

Ответ 7

Если я правильно понимаю вопрос, вы можете попробовать добавить padding:0 или даже что-то вроде padding:-10px; или аналогично контейнеру

Ответ 8

Вы сделали padding: 10px;, который также добавляет дополнение к нижней части. Используйте это, чтобы удалить дополнение внизу:

padding: 10px 10px 0px 10px;