CSS3实现了左右固定中间自适应的几种方法

时间：2020-01-30 21:02:49 阅读：103 评论：0 收藏：0 [点我收藏+]

标签：dde 20px css col 方法 display str isp float

1，弹性盒（flex）布局

中间 .center 区域设置 flex-grow: 1 或者 width: 100%

.container {
                width: 100%;
                min-height: 200px;
                background-color: red;
                display: flex;
            }
            .container .left {
                width: 200px;
                height: 200px;
                background-color: purple;
            }
            .container .right {
                width: 150px;
                height: 200px;
                background-color: blue;
            }
            .container .center {
                /* flex-grow: 1; */
                width: 100%;
                height: 200px;
                background-color: orange;
            }

        <div class="container">
            <div class="left"></div>
            <div class="center"></div>
            <div class="right"></div>
        </div>

2, 利用浮动（注意div排版的结构）

.container{
            width: 100%;
           /* background-color: green;
            min-height: 500px; */
        }
        .left{
            width: 200px;
            height: 300px;
            background-color: pink;
            float: left;
        }
        .right{
            width: 150px;
            height: 300px;
            background-color: purple;
            float: right;
        }
        .center{
            height: 300px;
            margin-left: 200px;
            margin-right: 150px;
            background-color: blue;
        }

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>
</div>

3，定位 （注意div排版的结构）

.container {
                width: 100%;
                position: relative;
            }

            .left {
                width: 200px;
                height: 300px;
                background-color: pink;
                position: absolute;
                top: 0;
                left: 0;
                position: absolute;
            }

            .right {
                width: 150px;
                height: 300px;
                background-color: purple;
                position: absolute;
                top: 0;
                right: 0;
            }

            .center {
                height: 300px;
                margin-left: 200px;
                margin-right: 150px;
                background-color: blue;
            }

4, 双飞翼布局

left、center、right三种都设置左浮动
设置center宽度为100%
设置负边距，left设置负边距为100%，right设置负边距为自身宽度
设置content的margin值为左右两个侧栏留出空间，margin值大小为left和right宽度

body {
            min-width: 550px;
            font-weight: bold;
            font-size: 20px;
        }

        #container {
            overflow: hidden;
        }

        #left,
        #right,
        #center {
            float: left;
        }

        #center {
            width: 100%;
            background: rgb(206, 201, 201);
        }

        #left {
            width: 200px;
            margin-left: -100%;
            background: rgba(95, 179, 235, 0.972);
        }

        #right {
            width: 150px;
            margin-left: -150px;
            background: rgb(231, 105, 2);
        }

        .content {
            margin: 0 150px 0 200px;
        }
                
                <div id="container">
            <div id="center">
                <div class="content">#center</div>
            </div>
            <div id="left">#left</div>
            <div id="right">#right</div>
        </div>

CSS3实现了左右固定中间自适应的几种方法

标签：dde 20px css col 方法 display str isp float

原文地址：https://www.cnblogs.com/shun1015/p/12243601.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行