Skip to content

Instantly share code, notes, and snippets.

@erikjung

erikjung/dabblet.css

Created February 9, 2012 05:18
Show Gist options
  • Save erikjung/1777541 to your computer and use it in GitHub Desktop.
Save erikjung/1777541 to your computer and use it in GitHub Desktop.
Download ZIP
Better Floating Tiles
Raw
dabblet.css
/* Better Floating Tiles */
* {
box-sizing:border-box;
}
body {
margin:0 auto;
width:51em;
}
img {
display:block;
max-width:100%;
}
.group {
overflow:hidden;
background:red;
}
.group > .tile {
float:left;
margin:0 1em 1em 0;
}
.group.l-med .tile {
width:25em;
}
.group.l-small .tile {
width:12em;
}
.group.l-med > .tile:nth-child(2n),
.group.l-small > .tile:nth-child(4n) {
margin-right:0;
}
.group.l-med > .tile:nth-child(2n+1),
.group.l-small > .tile:nth-child(4n+1) {
clear:left;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class="group l-med">
<div class="tile"><img src="//placehold.it/1000x800"></div>
<div class="tile"><img src="//placehold.it/1000x700"></div>
<div class="tile"><img src="//placehold.it/1000x700"></div>
<div class="tile"><img src="//placehold.it/1000x800"></div>
</div>
<div class="group l-small">
<div class="tile"><img src="//placehold.it/1000x800"></div>
<div class="tile"><img src="//placehold.it/1000x700"></div>
<div class="tile"><img src="//placehold.it/1000x700"></div>
<div class="tile"><img src="//placehold.it/1000x800"></div>
<div class="tile"><img src="//placehold.it/1000x400"></div>
<div class="tile"><img src="//placehold.it/1000x200"></div>
<div class="tile"><img src="//placehold.it/1000x200"></div>
</div>
Raw
settings.json
{"view":"split-vertical","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment