Kolumna Webkit CSS3 dodaje dodatkowe wypełnienie do swojego kontenera.

Stworzyłem wieloblokowy układ CSS3 dla galerii obrazów, który wygląda ładnie w Firefoksie.

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;
}

Problem polega na tym, że gdy używam przeglądarki Chrome do jej otwarcia, dodaje dodatkową przestrzeń na dole<section> które nie mam pojęcia, aby to naprawić. Wyszukałem w internecie i znalazłem towątek ale nie jestem pewien, czy to ten sam problem.

Sprawdź toskrzypce link i spróbuj otworzyć używając Chrome i Firefox.

questionAnswers(9)

yourAnswerToTheQuestion