Webkit-CSS3-Spalte fügt eine zusätzliche Polsterung zu seinem container.

Habe ich einen CSS3 multi-column layout für die image-Galerie, die schön aussieht auf 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;
}

Das problem ist, wenn ich mich per Chrome-browser, um es zu öffnen, es fügt zusätzlichen Raum an der Unterseite des <section> die ich habe keine Ahnung, um es zu beheben.
Ich habe im web suchen und fand diese thread aber ich bin nicht sicher, ob es das gleiche Problem.

Überprüfen Sie diese fiddle link und öffnen mit Chrome und Firefox.

  • Ich kenne keine Lösung, aber der große Raum geht Weg, wenn Sie entfernen -webkit-column-break-inside: avoid; von der article styling. Diese jedoch verlässt ein scheinbar leeres, noch nicht existierenden Artikel an der Spitze der rechten Spalte.
  • Ja, dass würde brach der oberen rechten Bild. Ich bin noch auf der Suche für eine Reine css-Lösung...
InformationsquelleAutor rzkio | 2013-07-20
Schreibe einen Kommentar