CSS-三栏布局

最新推荐文章于 2024-06-21 08:52:31 发布

ZC97

最新推荐文章于 2024-06-21 08:52:31 发布

阅读量147

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/qq_35805004/article/details/115912626

版权

css 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1、浮动布局：优点：兼容性好；缺点：元素脱离文档流，产生浮动。

<style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .box>div {
            height: 100px;
        }

        .left {
            float: left;
            width: 100px;
            background: red;
        }

        .content {
            background: yellow;
        }

        .right {
            float: right;
            width: 100px;
            background: blue;
        }
    </style>
    /*这种布局方式是利用浮动脱离文档流实现的，这里需要特别注意一下，left、right都在content前面布局，如果按照正常的顺序left-content-right，中间元素形成定位，那么就会将right顶下去。无法实现三栏布局。 */
    <body>
	    <div class="box">
	        <div class="left">1</div>
	        <div class="right">3</div>
	        <div class="content">2</div>
	    </div>
	</body>

2、定位布局：优点：简单，适合快速开发页面；缺点：元素脱离文档流，导致后面的元素也会脱离文档流，可使用性比较差

<style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .box {
            position: relative;
        }

        .box>div {
            height: 100px;
            position: absolute;
        }

        .left {
            left: 0px;
            width: 100px;
            background: red;
        }

        .content {
            left: 100px;
            right: 100px;
            background: yellow;
        }

        .right {
            right: 0px;
            width: 100px;
            background: blue;
        }
    </style>
    <div class="box">
        <div class="left">1</div>
        <div class="content">2</div>
        <div class="right">3</div>
    </div>

3、flex布局：优点：开发简单易上手；缺点：这在移动端开发非常常见，但PC端IE8不兼容。

<style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .box {
            display: flex;
        }

        .box>div {
            height: 100px;
        }

        .left {
            width: 100px;
            background: red;
        }

        .content {
            flex: 1;
            background: yellow;
        }

        .right {
            width: 100px;
            background: blue;
        }
    </style>
    <div class="box">
        <div class="left">1</div>
        <div class="content">2</div>
        <div class="right">3</div>
    </div>

ZC97

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS-三栏布局

1、浮动布局：优点：兼容性好；缺点：元素脱离文档流，产生浮动。<style> * { margin: 0; padding: 0; box-sizing: border-box; } .box>div { height: 100px; } .left { float: left;
复制链接

扫一扫