zoukankan      html  css  js  c++  java
  • css 左右固定宽度,中间自适应的三列布局

    float——浮动布局:

    使用浮动,先渲染左右两个元素,分别让他们左右浮动,然后再渲染中间元素,设置它的margin左右边距分别为左右两个元素的宽度。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <div style="300px; float:left; background:#6FF">左侧的内容 固定宽度</div>
        <div style="200px; float:right; background-color:#960">右侧的内容 固定宽度</div>
        <div style="margin-left:300px;margin-right:200px; background-color:#9F3;">中间内容,自适应宽度</div>
    </body>
    </html>

    position——定位:

    使用定位方式,不需要先渲染中间元素,只要把左右两个元素分别使用定位,left:0;right:0;中间元素设置margin左右边距为左右两个元素的宽度即可。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
    .left{
         width:200px;
         height:500px;
         position: absolute;
         top:0;
         left:0;
         background:blue;
    }
    .center{
        margin-left: 200px;
        margin-right: 300px;
        height:500px;
        background-color: green;
    }
    .right{
    width:300px;
    height:500px;
    position: absolute;;
    top:0;
    right:0;
    background: blue;
    }
        </style>
    </head>
    <body>
        <div class="left">左边</div>
        <div class="center">中间</div>
        <div class="right">右边</div>
    </body>
    </html>

    双飞翼布局:

    与其他方式不同,它最先渲染的是中间元素,然后才渲染两边元素(注意,这一点与float布局方式正好相反哟),先将三个元素都设置为向左浮动,然后使用负边距将左右两个元素覆盖到中间元素的左右两边,形成羽翼。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
    .middle{
        float: left;
        width: 100%;
        height: 50px;
        background-color: #fff9ca;
    }
    .middle-wrap{
        margin: 0 200px 0 150px;
    }
    .left{
        float: left;
        width: 150px;
        height: 50px;
        background-color: red;
        margin-left: -100%;       /*负边距的作用就是让左边div盖在中间div上面*/
    }
    .right{
        float: left;
        width: 200px;
        height: 50px;
        background-color: yellow;
        margin-left: -200px;    /*让右边的div覆盖在中间的div右边*/
    }
        </style>
    </head>
    <body>
        <div class="middle">
            <div class="middle-wrap">middle</div>
        </div>
        <div class="left">left</div>
        <div class="right">right</div>
    </body>
    </html>

    原文:http://www.cnblogs.com/pwei/archive/2016/04/01/css-layout.html

  • 相关阅读:
    核心数据类型
    Python入门
    [多校联考2019(Round 4 T2)][51nod 1288]汽油补给(ST表+单调栈)
    [Codeforces 1228E]Another Filling the Grid (排列组合+容斥原理)
    [luogu5339] [TJOI2019]唱、跳、rap和篮球(容斥原理+组合数学)(不用NTT)
    用生成函数推导数列的通项公式
    [Luogu 5465] [LOJ 6435] [PKUSC2018]星际穿越(倍增)
    [BZOJ4569] [Luogu 3295] [SCOI2016]萌萌哒(并查集+倍增)
    [BZOJ4444] [Luogu 4155] [LOJ 2007] [SCOI2015]国旗计划(倍增)
    倍增好题记录
  • 原文地址:https://www.cnblogs.com/xulei1992/p/6834678.html
Copyright © 2011-2022 走看看