css三列布局，两边固定，中间自适应

最新推荐文章于 2022-03-31 09:00:00 发布

码农的1024

最新推荐文章于 2022-03-31 09:00:00 发布

阅读量148

点赞数

本文链接：https://blog.csdn.net/qq_16142159/article/details/89401950

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    /*绝对定位布局*/
    .wrap1 {
        display: none;
    }

    .wrap1 .center {
        height: 200px;
        /*两列的情况*/
        /*margin: 0 200px;  */
        margin: 0 0 0 210px;
        /*两列的情况*/
        background: #ccc;
        word-break: break-all;
        padding: 10px;
    }

    .wrap1 .left,
    .wrap1 .right {
        position: absolute;
        background: #eee;
        top: 0;
        width: 200px;
    }

    .wrap1 .left {
        left: 0;
    }

    .wrap1 .right {
        right: 0;
    }

    /*浮动布局*/
    .wrap2 {
        display: none;
    }

    .wrap2 .left,
    .wrap2 .right {
        width: 200px;
        background: #eee;
    }

    .wrap2 .left {
        float: left;
    }

    .wrap2 .right {
        float: right;
    }

    .wrap2 .center {
        min-height: 200px;
        margin: 0 210px;
        background: #ccc;
        padding: 10px;
        word-break: break-all;
    }

    /*圣杯布局*/
    .wrap3 {
        display: none;
    }

    .wrap3 .centerWrap {
        width: 100%;
        height: 100px;
        /*background:#ccc;*/
        float: left;
    }

    .wrap3 .centerWrap .center {
        margin: 0 0 0 210px;
        height: 100px;
        background: #ccc;

    }

    .wrap3 .left,
    .wrap3 .right {
        float: left;
        width: 200px;
        height: 100px;
        background: darkorange;
    }

    .wrap3 .left {
        margin-left: -100%;
        background: lightpink;
    }

    .wrap3 .right {
        margin-left: -200px;
    }

    /*css3 flex布局*/
    .wrap4 {
        display: flex;
    }

    .wrap4 .left,
    .wrap4 .right {
        width: 200px;
        height: 100px;
    }

    .wrap4 .center {
        flex: 1;
        background: blue;
        color: #fff;
        height: 100px;
    }
    </style>
</head>

<body>
    <div class="wrap1">
        <!-- 绝对定位布局 -->
        <div class="left">left</div>
        <div class="center">centercentercentercentercentercentercentercentercentercentercentercenter</div>
        <!-- <div class="right">right</div> -->
    </div>
    <div class="wrap2">
        <!-- 浮动布局 -->
        <div class="left">left</div>
        <div class="right">right</div>
        <!-- center的位置必须在最后面不对换 -->
        <div class="center">
            <p>centercentercentercentercentercentercentercentercentercentercentercenter</p>
            <p>centercentercentercentercentercentercentercentercentercentercentercenter</p>
        </div>
    </div>
    <div class="wrap3">
        <!-- 圣杯布局，center必须被一个盒子包裹，位置必须在最上面 -->
        <div class="centerWrap">
            <div class="center">center</div>
        </div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    <div class="wrap4">
        <!-- css3 flex布局 -->
        <div class="left">left</div>
        <div class="center">center</div>
        <div class="right">right</div>
    </div>
</body>

</html>

码农的1024

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css三列布局，两边固定，中间自适应

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

扫一扫