Ich habe ein mehrspaltiges CSS3-Layout für die Bildergalerie erstellt, das in Firefox gut aussieht.

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

Das Problem ist, wenn ich den Chrome-Browser verwende, um ihn zu öffnen, wird am unteren Rand des Fensters zusätzlicher Speicherplatz hinzugefügt<section> das habe ich keine ahnung, um es zu beheben. Ich habe im Internet gesucht und dies gefundenFaden aber ich bin nicht sicher, ob es das gleiche Problem ist.

Überprüfen Sie diesGeige Verlinke und öffne es mit Chrome und Firefox.