zoukankan      html  css  js  c++  java
  • 布局—两侧固定,中间自适应

    如果是要求中间内容决定宽度,给其auto即可,不讨论此情况。

    以下讨论中间宽度由两侧决定的情形。

    HTML结构

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>两侧固定,中间自适应</title>
    </head>
    <body>
        <div>
            <div>左边栏</div>
            <div>右边栏</div>
            <div>主体内容</div>
        </div>
    </body>
    </html>

    方法一:利用绝对定位(不推荐)

     如果中间块有最小宽度限制或含有宽度的内部元素,当浏览器小到一定程度,会发生重叠的情况

        <style type="text/css">
            body{padding: 0;margin: 0;}
            div{height: 600px;}
            .left{width: 300px;background: red;position: absolute;left: 0;top: 0;}
            .right{width: 300px;background: blue;position: absolute;right: 0;top: 0;}
            .center{margin: 0 300px;background: yellow;}
        </style>

    方法二:利用浮动

    需要注意的是,在写HTML结构时,中间列一定要放在左右两列后面,否则无法实现

        <style type="text/css">
            body{padding: 0;margin: 0;}
            div{height: 600px;}
            .left{width: 300px;background: red;float: left;}
            .right{width: 300px;background: blue;float: right;}
            .center{margin: 0 300px;background: yellow;}
        </style>

    方法三:利用margin

        <style type="text/css">
            body{padding: 0;margin: 0;}
            div{height: 600px;}
            .left{width: 300px;background: red;float: left;margin-right: 200px; }
            .right{width: 300px;background: blue;float: right;margin-left: 200px;}
            .center{width:auto;margin: 0 300px;background: yellow;}
        </style>

    方法四:最简单的方法

    左右浮动中间auto

        <style type="text/css">
            body{padding: 0;margin: 0;}
            div{height: 600px;}
            .left{width: 300px;background: red;float: left;margin-right: 200px; }
            .right{width: 300px;background: blue;float: right;margin-left: 200px;}
            .center{width:auto;margin: 0 300px;background: yellow;}
        </style>

    方法五:实现中间栏优先加载css方法(重要部分优先加载)

    优先加载关键在于重要内容在html里面必须在前面,所有main部分移到了最上面

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>两侧固定,中间自适应</title>
        <style type="text/css">
            body{padding: 0;margin: 0;}
            .main-wrap{ float:left; width:100%;margin-bottom:-600px; padding-bottom:600px;background:#F90;}
            .main{ margin:0 200px 0 150px;}
            .left{ float:left; margin-left:-100%; width:150px; background:#6C0; margin-bottom:-600px; padding-bottom:600px;}
            .right{ float:left; margin-left:-200px; width:200px; background:#F9F; margin-bottom:-600px; padding-bottom:600px;}
        </style>
    </head>
    <body>
    <div class="main-wrap">
         <div class="main">主体</div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
    </body>
    </html>

    方法六:中间栏优先加载position:absolute方法

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>两侧固定,中间自适应</title>
    <style type="text/css">
    html,body{width:100%;height:100%;margin:0;padding:0;}
    .content{width:100%;height:100%;position:relative;background:#CFF;overflow:hidden;}
    .center-ct{height:100%;background:#60F;position:absolute;z-index:900;top:0;left:0;margin:0;width:100%;}
    .center{margin:0 200px;}
    .left{width:200px;height:100%;background:#0F0;position:absolute;z-index:1001;top:0;left:0;}
    .right{width:200px;height:100%;background:#FF0;position:absolute;z-index:1000;right:0;top:0;}
    </style>
    </head>
    <body>
    <div class="content">
        <div class="center-ct">
            <div class="center">
            center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center
            </div>
        </div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    </body>
    </html>

    方法七:中间栏优先加载,采用css3 方法

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>两侧固定,中间自适应</title>
    <style>
    .container{
            display:-moz-box;
            display:-webkit-box;
            }
    div{
            padding:10px;
            -moz-box-sizing:border-box;
            -webkit-box-sizing:border-box;                
            }        
    .sider_l{
            width:250px;
            -moz-box-ordinal-group:1;
            -webkit-box-ordinal-group:1;                
            background:limegreen;
            }
    .middle_content{
            -moz-box-flex:1;
            -webkit-box-flex:1;
            -moz-box-ordinal-group:2;
            -webkit-box-ordinal-group:2;
            background:lightpink;                
            }        
    .sider_r{
            width:250px;
            -moz-box-ordinal-group:3;
            -webkit-box-ordinal-group:3;                
            background:green;                
            }                        
    </style>
    </head>
    <body>
            <div class="container">
                <div class="middle_content">优先加载主内容区</div>
            <div class="sider_l">左边栏</div>
                    <div class="sider_r">右边栏</div>            
        </div>
    </body>
    </html>
    敢想,敢做
  • 相关阅读:
    sql server数据库中char,varchar,nvarchar字段的区别
    SQLServer 实现rownum 的功能
    web.config加密和解密
    页面命名和用户控件命名一样带来的后果
    oracle初识
    加载类成员技巧
    string.Empty与"",null的区别
    收集了一些有关网页设计的问题集
    网页最顶部转瞬即逝的巨幅广告特效
    鼠标放在图片连接上面,预览图片
  • 原文地址:https://www.cnblogs.com/ZL8655/p/5419384.html
Copyright © 2011-2022 走看看