左右侧边栏固定宽,中间宽度自适应

最新推荐文章于 2020-12-14 18:02:09 发布

weixin_34235371

最新推荐文章于 2020-12-14 18:02:09 发布

阅读量194

点赞数

原文链接：http://www.cnblogs.com/yuerdong/p/7838979.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三列布局</title>
    <style type="text/css">        
        *{margin: 0;padding: 0;}
        html, body{height: 100%;}

        /*定位布局*/   
        .container, .left, .right, .center { 
            height: 100%;
        }
        .container{ 
            position: relative;
        }
        .left, .right{
            top: 0;
            position: absolute;
            width: 200px;
        }
        .left{
            left: 0;
            background-color: #f60;
        }
        .right{
            right: 0;
            background-color: #e30;
        }
        .center{
            background-color: #fde560;
            padding: 10px 10px 0 10px;
            margin: 0 200px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="center">左右栏固定宽、中间栏宽度自适应</div>
        <div class="right"></div>
    </div>
</body>
</html>

html+css

转载于:https://www.cnblogs.com/yuerdong/p/7838979.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_34235371

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
左右侧边栏固定宽,中间宽度自适应

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>三列布局</title> <style type="text/css"> *{margin: 0...
复制链接

扫一扫