两栏自适应布局6种方案（一侧定宽，一侧自适应宽度）

最新推荐文章于 2024-09-07 01:53:51 发布

Cassy_Wu

最新推荐文章于 2024-09-07 01:53:51 发布

阅读量2.9k

点赞数 4

文章标签：两栏自适应布局左侧定宽，右侧自适应右侧定宽，左侧自适应前端布局前端面试

本文链接：https://blog.csdn.net/Cassy_Wu/article/details/85691070

版权

本文总结了6种实现两栏布局的方法，包括左侧或右侧定宽，另一侧自适应宽度的布局。涵盖浮动、margin、BFC、position、display:table和flex布局。这些技巧对于前端开发者理解和解决面试题非常有帮助。

摘要由CSDN通过智能技术生成

最近看面试题，看到很多次类似的题目，左侧定宽右侧自适应，或右侧定宽左侧自适应。网上众说纷纭，示例很多缺少原理讲解。所以在此复习总结。希望能给初学者，自学者一些帮助吧。共勉。。。

目前我所知的主要6种方式

方法一：

固定宽度区域浮动，自适应区域设置margin(值 = 固定的宽)

原理：float的固定宽度区域脱离文档流。自适应区域默认占满父元素宽度。通过设置margin(值 = 固定的宽) 来控制自适应区域的宽度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            border: 1px solid;
            overflow: hidden; /*清浮动*/
        }
        .left{
            float: left;
            width: 200px;
            height: 500px;
            background-color: skyblue;
        }
        .right{
            height: 200px;
            background-color: pink;
            margin-left: 200px; /*值 = 固定的宽*/
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left">左边固定宽度200</div>
        <div class="right">右边自适应</div>
    </div>
</body>
</html>

左侧浮动定宽，右侧自适应
注：此种方法必须要把浮动的固定区域放在前面。因为浏览器的渲染顺序，自适应的区域会先撑满整个区域。否则如图所示

<body>
    <div class="box">
        <div class="right">右边自适应</div>
        <div class="left&#

最低0.47元/天解锁文章

Cassy_Wu

关注

4
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫