css 三列左中固定自适应布局

最新推荐文章于 2024-10-13 08:49:06 发布

ln拒绝

最新推荐文章于 2024-10-13 08:49:06 发布

阅读量135

点赞数

分类专栏：前端学习文章标签： css html

本文链接：https://blog.csdn.net/weixin_44144080/article/details/105813928

版权

前端学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

左中右各一块，这一点很简单，重要的是css布局。只需要float设为left，并设置margin来调整三部分，就可以实现。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三列左中固定自适应布局</title>
    <style>
        body {
            font-size: 18px;
            min-width: 600px;
        }

        .container {
            width: 100%;
            overflow: hidden;
        }

        .left, .center{
            width: 200px;
            float: left;
            height: 200px;
            margin:0 5px;
        }
        .left {
            background-color: #00f;
        }

        .center {
            background-color: #ff0;
        }

        .right {
            width: 100%;
            height: 200px;
            float: left;
            background-color: #f00;
            margin-right: -100%;
        }
        .content {
            margin-right: 420px;
        }

    </style>
</head>
<body>
<div class="container">
    <div class="left"><p>left fixed</p></div>
    <div class="center">
        <div>中间固定</div>
    </div>
    <div class="right">
        <div class="content">
            右侧自适应 右侧自适应 右侧自适应 右侧自适应 右侧自适应 右侧自适应 右侧自适应 右侧自适应 右侧自适应 右侧自适应 右侧自适应 右侧自适应 右侧自适应 右侧自适应
        </div>
    </div>
</div>
</body>

效果如下：
在这里插入图片描述

上面用的是float:left的方法，那么右边自适应宽度用
float:right; margin-left:-100%;
行不行呢？
答案是不行的。因为.right 的宽度是是100%，右浮动会占据左边位置。

/*改动如下*/
.right {
    width: 100%;
    height: 200px;
    float: right;
    background-color: #f00;
    margin-left: -100%;
}
/*.content {*/
    /*margin-right: 420px;*/
/*}*/

效果如下：
在这里插入图片描述
此时，左右两块被右块盖住了。想要他们浮在上层，需要添加
position:relative; 配合margin-left;
还可以使用z-index来设置谁在上层。（注意，文档流的z-index无效，relative和absolute才有效。）

/*修改;*/
.left, .center{
    position:relative;
    /*...*/
}
/*...*/
right {
/*...*/
    float: right;
    margin-left: -420px;
}
.content {
    margin-left: 420px;
}

position:relative;添加后

z-index设置显示优先级

.left {
    background-color: #00f;
    z-index: -999;/*设置无穷小置为底层，无穷大置为顶层*/
}

在这里插入图片描述

ln拒绝

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录