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 derarticle
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...
Du musst angemeldet sein, um einen Kommentar abzugeben.
Versuchen, diese CSS -
Einen quick-fix, targeting nur auf webkit - Browsern
CSS:
Auch, bei der Verwendung von Spalten, ich finde, dass die Anzeige der Elemente im inneren, wie inline-Blöcke, hilft verhindern, dass Sie auseinander bricht (in deinem Fall)
CSS:
Verwenden Sie margin-bottom in jeder 20px Artikel,
und padding die container 20px zu,
Sehen diese fiddle
Wenn ich Verständnis für die Frage richtig ist, versuchen...
und
padding: 20px 0 20px;
ausreichen würde, auch.Alternative zur Verwendung von { display: inline-block }
stammen aus: Ähnliches Problem, CSS-Tricks
Verwenden Sie nicht mit einer Eigenschaft
column-break-inside: avoid;
allemargin
oderpadding
,border
nurmargin-bottom
denke ich, dass dies die beste Lösung für dieses problem. http://jsfiddle.net/SdtP5/3Wenn ich die Frage zu verstehen rechts,
Sie könnten versuchen, hinzufügen
padding:0
oder sogar so etwas wiepadding:-10px;
oder ähnlich wie die containterHast du
padding: 10px;
dass auch fügt Polsterung an der Unterseite. Verwenden Sie dieses entfernen-Polsterung unten:Ist es, nur white-space!