用Html5制作简单的6列自适应布局

HTML部分

<div id="container">
    <h2>6列布局</h2>
    <div class="cols cols6">
       <section class="first col">
          <header>
             <h3>布局单元1</h3>
          </header>
          <p>布局单元内容区</p>
        </section>
        <section class="col"></section>
        <section class="col"></section>
        <section class="col"></section>
        <section class="col"></section>
        <section class="col"></section>
    </div>
</div> 

css部分

body{
    font:1em Helvetica, Arial, Sans-Serif;
    line-height:1.5em;
    color:#333;
    font-size:13px;
    background:#fff;
    text-align:center;
}
.first {
    margin-left:0 !important;
}
#container {
    margin:0 auto;
    max-width:1240px;
    min-width:760px;
    position:relative;
    text-align:left;
}
.col {
    float:left;
    display:inline; 
    margin-left:2%;
    background:#f1f1f1; 
} 
.cols6 .col{width:15%;} /*6列布局的宽度*/

之所以使用百分比作为宽度单位，这样做可以让布局格式在任何分辨率的屏幕下都可以自动适应，甚至800*600的分辨率都可以。需要说明的是，如果你现在用IE浏览器看这个页面，几乎是乱排的，因为IE9以下的版本还没有支持Html5，所以现在就先用Firefox或Opera、Safari、Google Chrome来预览它吧。

转载于:https://www.cnblogs.com/JoannaQ/archive/2012/08/29/2661295.html