网格布局的两种实现

网格布局常见的两种布局形式:

1.利用组合类方式:这方式将布局细化,利于扩展,但是代码结构性较差;

2.子选择器方式:这方式结构性,可读性优秀,但是xx-xx-xx的命名方式有局限行,但不失为一种不错的布局方式

css:

  .fl{float:left}
        .fr{float:right}
        .content{clear:both}
        .header{}
        .footer{clear:both}
        .siderbar{}
        .main{}
        .w25{width:25%}
        .w70{width:70%}
        .w35{width:35%}
        .w60{width:60%}
        .w80{width:80%}
        .w15{width:15%}
        
        .content-lr-7025 .main{float:left;width:70%}
        .content-lr-7025 .sidebar{float:right;width:25%}
        .content-rl-7025 .main{float:right; width:70%}
        .content-rl-7025 .siderbar{float:left;width:25%}
        .content-lr-6035 .main{float:left;width:60%}
        .content-lr-6035 .siderbar{float:right;width:35%}
        .content-rl-6035 .main{float:left;width:35%}
        .content-rl-6035 .siderbar{float:right;width:60%}

界面

<!-- 網格佈局 組合類方式 -->
        <div class="header"></div>
        <div class="content">
            <div class=" main fl w70"></div>
            <div class="siderbar fr w25"></div>
        </div>
        <div class="content">
            <div class=" main fr w60"></div>
            <div class="siderbar fl w35"></div>
        </div>
        <div class="footer"></div>
        
        <!-- 網格佈局 子選擇器方式 -->
        <div class="header"></div>
        <div class="content-lr-7025">
            <div class="main"></div>
            <div class="siderbar"></div>
        </div>
        <div class="content-rl-6035">
            <div class="main"></div>
            <div  class="siderbar"></div>
        </div>
        <div class="footer"></div>