zoukankan      html  css  js  c++  java
  • 常用两栏布局和三栏布局

    两栏自适应布局

    1.左栏定宽,右栏自适应

    1.左侧absolute或float,定宽,右侧使用padding-left或者margin-left
    2.左侧float,定宽,右侧BFC(overflow:hidden或display:table-cell)

    3.左侧absolute,右侧marign-left
    <div class="left"></div>
    <div class="right"></div>
    .left{position:absolute;width:200px;}
    .right{margin-left:200px;}
    4.flex
    <div class="wrap">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    .wrap{display:flex}
    .left{width:200px}
    .right{flex:1}

    2.右栏定宽,左栏自适应

    1.右栏float定宽,左侧margin-right

    <div class="right"></div>
    <div class="left"></div>
    
    .right{56px;float:right;}
    .left{margin-right:56px}

    2.左栏先渲染,宽度100%,两栏左浮动,负margin拉回上面

    <div class="left"></div>
    <div class="right"></div>
    
    .left{100%;float:left}
    .right{56px;float:left;margin-left:-56px;}

    3.右侧float定宽,左侧BFC

    <div class="right"></div>
    <div class="left"></div>
    .right{float:right;200px;}
    .left{display:table-cell;2000px;*display:inline-block;*auto;}

    4.右侧absolute,左侧margin-right

    <div class="right"></div>
    <div class="left"></div>
    .right{position:absolute;width:200px;}
    .left{margin-left:200px;}

    5.flex

    <div class="wrap">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    .wrap{display:flex}
    .left{width:200px}
    .right{flex:1}

    3.左右两栏都都自适应

    左侧float,不定宽,右侧BFC

    三栏自适应布局

    两端固定,中间自适应

    1.左右浮动(左右文字环绕,配合左右margin,文字强制换行,勉强实现中间自适应)

    <div class="left"></div>
    <div class="right"></div>
    <div class="mid"></div>
    
    .left{float:left;200px}
    .right{float:right;200px}
    .mid{margin-left:$leftWidth;margin-right:$rightWidth;word-wrap:break-word}

    2.左右浮动,中间BFC(利用左右文字环绕和BFC与float元素不重叠的特性)

    <div class="left"></div>
    <div class="right"></div>
    <div class="mid"></div>
    
    .left{float:left;200px}
    .right{float:right;200px}
    .mid{
        display:table-cell;
        2000px;/*table-cell根据内容设定宽度,要预先设定宽度撑开*/
        *display:inline-block;/*ie6-7触发hasLayout实现自适应*/
        * auto;      
    }

    3.两侧absolute,中间用左右margin撑开

    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>
    
    .left{position:absolute;200px;}
    .right{positon:absoulte;300px;}
    .center{margin-left:200px;margin-right:300px;}

    4.flex布局

    <div class="wrap">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>
    <style>
        .wrap{display:flex}
        .left{width:200px;}
        .right{width:200px;}
        .center{flex:1}
    </style>

    5.双飞翼(三列浮动,内容居上,宽度100%,内部元素左右margin留空,left元素负margin 100%拉倒最左端,right元素负margin宽度拉到右端)

    <div class="wrap">
        <div class="center">
            <div class="center_in"></div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
    
    .center,.left,.right{float:left}
    .center{100%}
    .center_in{margin-left:$left;margin-right:$right;}
    .left{$left;margin-left:-100%}
    .right{$right;margin-left:-$right;}

    6.圣杯布局(内容优先)

    <div class="wrap">
        <div class="center"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
    
    .wrap{padding-left:$left;padding-right:$right;}
    .center,.left,.right{float:left;}
    .center{100%;}
    .left{$left;margin-left:-100%;position:relative;right:$left;}
    .right{$right;margin-right:-$right;}

    中间固定,两端自适应

    1.百分比+负margin

    <div class="left">
        <div class="left-inner"></div>
    </div>
    <div class="mid">
    </div>
    <div class="right">
        <div class="right-inner"></div>
    </div>
    
    $halfMidWidth: $midWidth/2+1
    
    .mid{$midWidth;float:left}
    .left,.right{float:left;50%;margin-left:-$halfMidWidth}
    .left-inner{margin-left:$halfMidWidth}
    .right-inner{margin-left:$halfMidWidth}

    2.flex布局

    <div class="wrap">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>
    
    .wrap{display:flex}
    .left,.right{flex:1;}
    .center{600px;}
  • 相关阅读:
    Hibernate 基本写法
    JavaWeb中的中文乱码问题
    AJAXJson
    Hibernate 的几个概念
    sql 中的备份集、备份设备、媒体、媒体集
    收缩数据库日志文件
    AJAXjs
    rand一定要加srand随机数种子
    CheckBit,SetBit设置二进制位的方法使用
    memset(buf,0,100)和memset(buf,'\0',100)有什么区别?
  • 原文地址:https://www.cnblogs.com/mengff/p/5253204.html
Copyright © 2011-2022 走看看