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

最新推荐文章于 2022-05-05 19:48:26 发布

Cassy_Wu

最新推荐文章于 2022-05-05 19:48:26 发布

阅读量2.8k

点赞数 4

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

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

版权

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

目前我所知的主要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
评论
两栏自适应布局6种方案（一侧定宽，一侧自适应宽度）

最近看面试题，看到很多次类似的题目，左侧定宽右侧自适应，或则右侧定宽左侧自适应。网上众说纷纭，示例很多没有原理讲解。所以借助自己复习总结。希望能给初学者，自学者一些帮助吧。共勉。。。目前所知的主要5种方式方法一：固定宽度区域浮动，自适应区域设置margin(值 = 固定的宽)原理：float的固定宽度区域脱离文档流。自适应区域默认占满父元素宽度。通过设置margin(值 = 固定的宽) ...
复制链接

扫一扫