zoukankan      html  css  js  c++  java
  • 自适应布局方法总结

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

    <!DOCTYPE html>
    <html>
    <head>
        <title>一栏固定一栏自适应</title>
        <style type="text/css">
            *{
                margin: 0;
                padding:0;
            }
            #left{
                width: 200px;
                height: 600px;
                float: left;
                background-color: #fffc00;
            }
            #main{
                height: 600px;
                width: auto;;
                background-color: #000;
            }
        </style>
    </head>
    <body>
    <!--一栏固定一栏自适应-->
    <div id="left">left 固定宽度</div>
    <div id="main">main 自适应宽度</div>
    </body>
    </html>

    实现效果:

    2左右两栏固定,中间自适应

    方法一:使用float浮动

        自身浮动法的原理就是对左右两栏分别使用float:left和float:right。float使左右两栏脱离文档流。中间元素不浮动,还在正常的文档流中,对中间元素使用margin指定左右外边距对其进行定位

    <!DOCTYPE html>
    <html>
    <head>
        <title>左右两栏固定,中间自适应</title>
        <style type="text/css">
            *{
                margin: 0;
                padding:0;
            }
            #container{
                width: 100%;
                margin: 0 auto;
            }
            #left{
                width: 200px;
                height: 600px;
                float: left;
                background-color: red;
            }
            #right{
                width: 100px;
                height: 600px;
                float: left;
                background-color: blue;
            }
            #main{
                height: 600px;
                background-color: orange;
                margin: 0 100px 0 200px;
            }
        </style>
    </head>
    <body>
    
    
    <div id="container">
        <div id="left">left 200px</div>
        <div id="right">right 100px</div>
        <div id="main">main 自适应</div>
    </div>
    </body>
    </html>

    方法二:使用绝对定位

        原理:将左右两栏进行absolute定位,使其脱离文档流。中间的一栏会自动浮到上面,然后使用left和right分别对应另外两个元素的宽度。

    <!DOCTYPE html>
    <html>
    <head>
        <title>左右两栏固定,中间自适应</title>
        <style type="text/css">
            *{
                margin: 0;
                padding:0;
            }
            #container{
                width: 100%;
                margin: 0 auto;
            }
            #left{
                width: 200px;
                height: 600px;
                float: left;
                background-color: red;
            }
            #right{
                width: 100px;
                height: 600px;
                float: left;
                background-color: blue;
            }
            #main{
                height: 600px;
                background-color: orange;
                margin: 0 100px 0 200px;
            }
        </style>
    </head>
    <body>
    
    
    <div id="container">
        <div id="left">left 200px</div>
        <div id="right">right 100px</div>
        <div id="main">main 自适应</div>
    </div>
    </body>
    </html>

    方法三:使用负margin(圣杯布局)

      原理:这里不做详细介绍圣杯布局。可自行百度。放下代码。

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #wrap{
                width: 100%;
                float: left;
            }
            #main{
                height: 600px;
                margin: 0 100px 0 200px;
                background-color: #000;
            }
            #left{
                width: 200px;
                height: 600px;
                float: left;
                margin-left: -100%;
                background-color: red;
            }
            #right{
                width: 100px;
                height: 600px;
                float: left;
                margin-left: -100%;
                background-color: blue;
            }
        </style>
    </head>
    <body>
    
    
    
    <div id="wrap">
        <div id="main">main 自适应</div>
    </div>
    
    <div id="left">left 200px</div>
    <div id="right">right 100px</div>
    </body>
    </html>

    方法四:使用flex(css3新特性)

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #container{
                width: 100%;
                display: flex;
            }
            #left{
                width: 200px;
                height: 600px;
                background-color: red;
            }
            #right{
                width: 100px;
                height: 600px;
                background-color: #000;
            }
            #main{
                height: 600px;
                background-color: blue;
                width: auto;
                flex: 1;    
            }
        </style>
    </head>
    <body>
    
    
    <div id="container">
        <div id="left">left 200px</div>
        <div id="main">main 自适应</div>
        <div id="right">right 100px</div>
    </div>
    </body>
    </html>

  • 相关阅读:
    【递归】拆分自然数
    HDOJ3068最长回文
    博弈论——尼姆博奕
    vijos P1047最小公倍数
    Eular质数筛法-hiho一下 第九十三周
    hdoj-5652 India and China Origins二分+bfs
    hdoj-1166排兵布阵 简单的树状数组
    hdoj-5641 king's phone
    hdoj-1548简单的bfs题目
    命令中"|"的意义
  • 原文地址:https://www.cnblogs.com/chaofei/p/7747690.html
Copyright © 2011-2022 走看看