zoukankan      html  css  js  c++  java
  • html布局 左右固定,中间只适应,三种方法实现

    html布局 左右固定,中间只适应,三种方法实现

    使用自身浮动法定位

    //html
    <h3>使用自身浮动法定位</h3>
    <div id="left_self"></div>
    <div id="right_self"></div>
    <div id="center_self"></div>
    //style
    #left_self,
    #right_self {
         200px;
        height: 100px;
        background-color: #ffe6b8
    }
    #left_self {
        float: left;
    }
    #right_self {
        float: right;
    }
    #center_self {
        margin: 0 210px;
        height: 100px;
        background-color: #a0b3d6
    }
    

     

    使用margin负值法进行布局

    //html
    <h3>使用margin负值法进行布局</h3>
    <div id="wrap">
        <div id="center"></div>
    </div>
    <div id="left_margin"></div>
    <div id="right_margin"></div>
    //css
    #wrap {
         100%;
        height: 100px;
        background-color: #fff;
        float: left;
    }
    #wrap #center {
        margin: 0 210px;
        height: 100px;
        background-color: #ffe6b8;
    }
    #left_margin,
    #right_margin {
        float: left;
         200px;
        height: 100px;
        background-color: darkorange
    }
    #left_margin {
        margin-left: -100%;
        background-color: lightpink
    }
    #right_margin {
        margin-left: -200px;
    }
    

    使用flex

    //html
    <div id="box">
        <div id="left_box"></div>
        <div id="center_box"></div>
        <div id="right_box"></div>
    </div>
    //css
    #box {
         100%;
        display: flex;
        height: 100px;
    }
    #left_box,
    #right_box {
         200px;
        height: 100px;
        background-color: lightpink
    }
    #left_box {
        margin-right: 10px;
    }
    #right_box {
        margin-left: 10px;
    }
    #center_box {
        flex: 1;
        height: 100px;
        background-color: lightgreen;
    }
    

    牢固的布局跟建房子打地基一样重要

  • 相关阅读:
    Python中的装饰器之@wraps(四)
    python中装饰器之有参装饰器(三)
    python中装饰器之叠加装饰器(二)
    python中装饰器之闭包函数(一)
    python中的命名空间
    函数的嵌套与迭代
    函数对象
    matlab学习checkbox使用
    matlab学习滚动条改变文本数值
    matlab学习GUI可调的界面窗口
  • 原文地址:https://www.cnblogs.com/yz-blog/p/7286283.html
Copyright © 2011-2022 走看看