前端面试关于三列布局全集

最新推荐文章于 2024-02-05 14:39:35 发布

原创

最新推荐文章于 2024-02-05 14:39:35 发布 · 468 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#中间宽度固定左右宽度自适应 #左右宽度固定中间宽度自适应 #间隙固定宽度自适应

本文详细探讨了前端面试中关于三列布局的问题，包括中间固定、两边自适应的布局实现，以及等宽等间距三列布局的解决方案。分别使用float配合负margin、flex布局、以及margin calc计算属性来达成目标。同时提到了中间自适应布局的实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

中间固定两边自适应

描述：现在有三列 a、b、a;其中它们高度一定、b宽度200px,让a自适应该如何做？

float +负margin

 <section class="layout-float">
        <style>
            .layout-float {
    
    
                min-height: 200px;
            }

            .layout-float .left,
            .layout-float .right {
    
    
                float: left;
                width: 50%;
                height: 200px;
                background-color: blue;
            }

            .layout-float .left {
    
    
                margin-left: -35px;
            }

            .layout-float .right {
    
    
                float: right;
                margin-right: -35px;
            }

            .layout-float .center {
    
    
                width: 70px;
                height: 200px;
                float: left;
                background-color: red;
            }

        </style>
        <article>
            <div class="left">left</div>
            <div class="center">center</div>
            <div class="right">right</div>
        </article>
    </section