box styling
This page compares the two methods against 'display' styling and :nth-child().
<div class="wrapper">
<article>
<div class="article">
...
</div>
</article>
<article>
<div class="article">
...
</div>
</article>
</div>
.wrapper {
width:100%;
display:-moz-box;
display:-webkit-box;
display:box;
-moz-box-orient:horizontal;
-webkit-box-orient:horizontal;
box-orient:horizontal;
}
.wrapper .article {
-moz-box-flex:1;
-webkit-box-flex:1;
box-flex:1;
}
box styling
box styling
.wrapper {
width:100%;;
display:table;
}
.wrapper .article {
display:table-cell;
}
table styling
table styling
.article {
display:inline-block;
*display:inline;
zoom:1;
}
inline-block styling
inline-block styling
.article:nth-child(even) {
background:#7AC142;
}
via :nth-child()
via :nth-child()
<div class="wrapper">
<div class="article">
<article>
...
</article>
</div>
<div class="article">
<article>
...
</article>
</div>
</div>
.wrapper {
width:100%;
display:-moz-box;
display:-webkit-box;
display:box;
-moz-box-orient:horizontal;
-webkit-box-orient:horizontal;
box-orient:horizontal;
}
.wrapper .article {
-moz-box-flex:1;
-webkit-box-flex:1;
box-flex:1;
}
box styling
box styling
.wrapper {
width:100%;
display:table;
}
.wrapper .article {
display:table-cell;
}
table styling
table styling
.article {
display:inline-block;
*display:inline;
zoom:1;
}
inline-block styling
inline-block styling
.article:nth-child(even) {
background:#7AC142;
}
via :nth-child()
via :nth-child()