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;
    }
    

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

  • 相关阅读:
    用Java实现四则运算
    敏捷开发角色分配
    需求分析之WBS
    需求分析之NABCD
    电梯演说
    开发流程的选择
    软件团队模式的选择
    维护日程管理项目
    日程管理系统中找错误
    Android的测试
  • 原文地址:https://www.cnblogs.com/yz-blog/p/7286283.html
Copyright © 2011-2022 走看看