布局—一侧固定宽度，一侧自适应

最新推荐文章于 2021-03-20 20:19:37 发布

dimoqiong1147

最新推荐文章于 2021-03-20 20:19:37 发布

阅读量118

点赞数

原文链接：http://www.cnblogs.com/ZL8655/p/5702490.html

版权

1.固定宽度区域浮动，自适应区域不设宽度而设margin

注意：sidebar必须在content之前

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #wrap{overflow: hidden;*zoom:1;}
        #sidebar,#content{background-color: red;height: 300px;}
        #sidebar{float: right;width: 300px;}
        #content{margin-right: 310px; }
        #footter{background-color: yellow;color: red;margin-top: 10px;}
    </style>
</head>
<body>
    <div id="wrap">
        <div id="sidebar">固定宽度</div>
        <div id="content">自适应部分</div>
    </div>
    <div id="footter">底部</div>
</body>
</html>

2.固定宽度绝对定位，自适应区域使用margin

注意：此时，wrap限制不了sidebar，可以给其加固定高度；绝对定位的特性，可先重置默认样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #wrap{overflow: hidden;}
        #sidebar,#content{background-color: red;height: 100%;}
        #sidebar{width: 300px;position: absolute;right: 0;top: 0;}
        #content{margin-right: 310px; }
        #footter{background-color: yellow;color: red;margin-top: 1em;}
    </style>
</head>
<body>
    <div id="wrap">
        <div id="sidebar">固定宽度</div>
        <div id="content">自适应部分</div>
    </div>
    <div id="footter">底部</div>
</body>
</html>

3.使用浮动和margin

注意：content宽度需要重新设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #wrap{overflow: hidden;}
        #sidebar,#content{background-color: red;height: 100px;}
        #sidebar{width: 300px;float: right;}
        #content{margin-left: -310px;float: left; width: 100%;}
        #content-box{margin-left: 310px;}
        #footter{background-color: yellow;color: red;margin-top: 1em;}
    </style>
</head>
<body>
    <div id="wrap">
        <div id="content">
            <div id="content-box">
                自适应部分
            </div>
        </div>
        <div id="sidebar">固定宽度</div>
    </div>
    <div id="footter">底部</div>
</body>
</html>

4.使用display：table

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #wrap{overflow: hidden;display: table;width: 100%;}
        #sidebar,#content{background-color: red;height: 100px;}
        #sidebar{width: 300px;display: table-cell;}
        #content{display: table-cell;width: 100%;}
        #footter{background-color: yellow;color: red;margin-top: 1em;}
    </style>
</head>
<body>
    <div id="wrap">
        <div id="content">
            自适应部分
        </div>
        <div id="sidebar">固定宽度</div>
    </div>
    <div id="footter">底部</div>
</body>
</html>

转载于:https://www.cnblogs.com/ZL8655/p/5702490.html

dimoqiong1147

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
布局—一侧固定宽度，一侧自适应

1.固定宽度区域浮动，自适应区域不设宽度而设margin注意：sidebar必须在content之前<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> ...
复制链接

扫一扫