清除浮动 网格系统
<!DOCTYPE html>
<html>
<head>
<style>
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.row:before,
.row:after {
content: "";
display: table;
}
.row:after {
clear: both;
}
.row {
zoom: 1;
}
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11 {
float: left;
}
.col-1 {
width: 8.333333333333332%;
}
.col-2 {
width: 16.666666666666664%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.33333333333333%;
}
.col-5 {
width: 41.66666666666667%;
}
.col-6 {
width: 50%;
}
.col-7 {
width: 58.333333333333336%;
}
.col-8 {
width: 66.66666666666666%;
}
.col-9 {
width: 75%;
}
.col-10 {
width: 83.33333333333334%;
}
.col-11 {
width: 91.66666666666666%;
}
.col-12 {
width: 100%;
}
</style>
</head>
<body>
<div class="row">
<div class="col-10">
<div class="col-6" style="text-align:right">
<span>left</span>
</div>
<div class="col-6">
<span>right</span>
</div>
</div>
<div class="col-2">
...
</div>
</div>
</body>
</html>
