CSS三栏布局的几种自适应的排版方式

CSS三栏布局的几种方式,主要有 float、position、flex实现。

对红色、蓝色 box 设置 float,绿色不设。

javascript 复制代码
<style>
        * {
            margin: 0;
            padding: 0;
        }

        .left {
            width: 200px;
            height: 300px;
            background-color: red;
            float:left;
        }

        .right {
            width: 200px;
            height: 300px;
            background-color: blue;
            float:right
        }

        .center {
            width: 200px;
            height: 300px;
            background-color: green;
        }

</style>


<body>
    <div class="father">
       <div class="left"></div>
       <div class="center"></div>
        <div class="right"></div>
        
    </div>
</body>

可见,结果绿色box好像消失了,其实是由于没有设置 float的情况下,它依然保持块级元素的属性。因此蓝色box在绿色box的元素下排列。

把绿色块元素移到最后,给它配置 margin 0 200px

可见绿色box刚好自动填充在红、蓝box之间。浏览器缩放时,也是3个box互相紧挨的效果。

position实现

javascript 复制代码
<style>
        * {
            margin: 0;
            padding: 0;
        }

        .left {
            width: 200px;
            height: 300px;
            background-color: red;
            /* float:left; */
            position:absolute;
            left:0;
        }

        .right {
            width: 200px;
            height: 300px;
            background-color: blue;
            /* float:right */
            position:absolute;
            right:0;
        }

        .center {
            /* width: 200px; */
            height: 300px;
            background-color: green;
            margin: 0 200px;
        }

</style>

<body>
    <div class="father">
       <div class="left"></div>
       <div class="right"></div>
       <div class="center"></div>
    </div>
</body>

对红、蓝box设置绝对定位的方式固定位置

flex实现 (最方便的一种)

javascript 复制代码
 <style>
        * {
            margin: 0;
            padding: 0;
        }

        .left {
            width: 200px;
            height: 300px;
            background-color: red;
            /* float:left; */
            /* position:absolute;
            /* left:0; */
        } 

        .right {
            width: 200px;
            height: 300px;
            background-color: blue;
            /* float:right */
            /* position:absolute;
            right:0;
           */
        }

        .center {
            /* width: 200px; */
            height: 300px;
            background-color: green;
            /* margin: 0 200px; */
        }

        .father{
            display:flex;
        }

    
</style>


<body>
    <div class="father">
       <div class="left"></div>
       <div class="center"></div>
       <div class="right"></div>
    </div>
</body>

设置 father 父元素的样式 display: flex;

可见绿色box又好像消失了,是因为绿色box没有设置宽度,当 father 元素设置 flex 后, 它里面的块级元素就不能继承 father的宽度。

给绿色 box 加设 flex-grow : 1 去自动填补剩余的空间。

最后补充一点,flex-grow: 1 其实也可以写为 flex: 1 1 auto; 或者更简写的 flex:1; 这个知识点,大家可以再参考关于flex布局这方面。

相关推荐
昔人'5 分钟前
html`contenteditable`
前端·html
爱宇阳10 分钟前
npm 常用标签与使用技巧新手教程
前端·npm·node.js
@大迁世界14 分钟前
2025 年该选谁?npm vs yarn vs pnpm
前端·npm·node.js
crary,记忆16 分钟前
简介NPM 和 NPX
前端·学习·npm·node.js
JianZhen✓33 分钟前
现在在本地开发了一些代码A,又有了新需求要紧急开发代码B需要只上线代码B的代码,如何更好的处理这种情况
前端
郝学胜-神的一滴1 小时前
Cesium绘制线:从基础到高级技巧
前端·javascript·程序人生·线性代数·算法·矩阵·图形渲染
蒙奇D索大1 小时前
【计算机网络】408计算机网络高分指南:物理层编码与调制技术精讲
java·前端·学习·计算机网络
无盐海2 小时前
CSRF漏洞攻击(跨站请求伪造攻击)
前端·csrf
慧一居士2 小时前
CSS3 全部功能点介绍,使用场景,对应功能点完整使用示例
前端
烛阴2 小时前
深入Lua包(Package)与依赖管理
前端·lua