metro风格的布局

metro风格的布局

by xiaobai

HTML

<div class="container">
    <div class="row">
        <div class="big fl"></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>

<div class="container">
    <div class="row">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="big fr"></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>
<div class="container">
    <div class="row">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="big fl"></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>
<div class="container">
    <div class="row">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="big fr"></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>
<div class="container">
    <div class="row">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>

CSS

.container {
    width:830px;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
}
.row:after,
.row:before {
    content:"";
    display:table;
}
.row:after {
    clear:both;
    overflow:hidden;
}
.row {
    zoom:1;
    margin-right: -10px;
}
.row  div {
    width: 200px;
    height:200px;
    background: green;
    margin-bottom: 10px;
    margin-right: 10px;
    float: left;
}
.row .big {
    width: 410px;
    height: 410px;
    background: orange;
}
.row .fr {
    float: right; 
}
.row .fl {
    float: left;
}