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>

敢想，敢做

查看全文

相关阅读:
CSwinform程序分页
 C#跨线程访问控件
 CS程序发布版本后提示自动升级功能
 winform控件的二次开发
 JavaNetty拆包粘包（二）
JavaNetty（一）
JavaAIO编程
 javaNIO编程
 Java中bio编程
 如何使用CryptoJS配合Java进行AES加密和解密

原文地址：https://www.cnblogs.com/ZL8655/p/5419384.html