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>

敢想，敢做

查看全文

相关阅读:
Redission源码
 RocketMQ 的heartBeat在做哪些事情
 Netty调用channel.close方法和客户端所在Java进程正常/异常关闭的细节
 RocketMQ源码之事务消息的回调方法应该怎么写？
spring 源码
 多线程同步工具ReentrantLock CountDownLatch CyclicBarrier Semaphore join
RocketMQ 的事务消息
 RocketMQ 怎样解决为了实时拉取消息而不得不一直轮询的问题
 .net winform 调用类中的webbrowser 报错：当前线程不在单线程单元中,因此无法实例化 ActiveX
[转]如何不格式化、不丢失数据修复内存卡

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