HTML
<section class="cf">
<div class="fl w-50 w-25-ns"><img class="db w-100" src="http://tachyons.io/img/1.jpg" alt="night sky over house"></div>
<div class="fl w-50 w-25-ns"><img class="db w-100" src="http://tachyons.io/img/2.jpg" alt="night sky over water"></div>
<div class="fl w-50 w-25-ns"><img class="db w-100" src="http://tachyons.io/img/3.jpg" alt="bay bridge at night"></div>
<div class="fl w-50 w-25-ns"><img class="db w-100" src="http://tachyons.io/img/4.jpg" alt="night sky over land"></div>
</section>
css
.cf:before, .cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
.db {
display: block;
}
.fl {
float: left;
_display: inline;
}
.w-50 {
width: 50%;
}
.w-100 {
width: 100%;
}
@media screen and (min-width: 30em) {
.w-25-ns {
width: 25%;
}
}
