zoukankan      html  css  js  c++  java
  • 左右侧固定,中间自适应布局和 左侧固定,右侧自适应布局

    一、左右侧固定,中间自适应布局

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
    *{
    margin: 0;
    padding: 0;
    }
    .clearfix:after{
    content: "";
    display: block;
    clear: both;
    }
    .clearfix{
    zoom: 1;
    }
    .left{
    position: absolute;
    top:0px;
    left: 0px;
    200px;
    height: 1000px;
    background-color: #1D71B6;
    }
    .right{
    position: absolute;
    top:0px;
    right: 0px;
    300px;
    height: 1000px;
    background-color: #000000;
    }
    .main{

    margin:0 310px 0 210px;
    height: 1000px;
    background-color: #BBBBBB;

    }
    </style>
    </head>
    <body>
    <div id="contain" class="clearfix">
    <div class="left">

    </div>
    <div class="main">

    </div>
    <div class="right">

    </div>
    </div>
    </body>
    </html>

    二。 左侧固定,右侧自适应布局

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title></title>
    </head>
    <style type="text/css">
    .left{
    float: left; /*或者是 position: absolute;*/
    50px;
    height: 80px;
    background: #BBBBBB;
    }
    .main{
    margin-left:50px;
    height: 80px;
    background-color: #1D71B6;
    }

    </style>
    <body>
    <div id="contain">
    <div class="left">

    </div>
    <div class="main">

    </div>
    </div>
    </body>
    </html>

  • 相关阅读:
    ViewPager 滑动页(一)
    Fragment中Button的android:onClick 无法监听相应
    Button的四种Click响应方法
    环形图 自定义(一)
    Progress 自定义(一)-shape
    Button 自定义(一)-shape
    客户机页表遍历
    KVM的ept机制
    linux内核源码中两个重要的宏
    总结
  • 原文地址:https://www.cnblogs.com/luoguixin/p/6125681.html
Copyright © 2011-2022 走看看