两列布局——左侧宽度固定，右侧宽度自适应的实现方法

最新推荐文章于 2022-11-14 15:02:44 发布

Miever

最新推荐文章于 2022-11-14 15:02:44 发布

阅读量854

点赞数

分类专栏： HTML/CSS

本文链接：https://blog.csdn.net/Miever/article/details/100997676

版权

本文介绍了三种实现左侧宽度固定，右侧宽度自适应的CSS布局方法：1) 左浮动+margin-left；2) 两个float方案，使用calc函数设定宽度；3) absolute定位+margin-left。每种方法都提供了相应的代码示例和效果展示。

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

左侧宽度固定，右侧宽度自适应的实现方法

方法一：左浮动+margin-left

让两个元素在同一行显示首先想到的就是浮动，首先可以让左侧元素浮动,使其脱离文档流,右边的元素加上margin-left,其值等于左边元素的宽度，这时右侧元素紧挨左侧元素，实现左侧宽度固定，右侧宽度自适应效果。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .left {
            width: 300px;
            height: 100px;
            background-color: pink;
            float: left;
        }

        .right {
            height: 200px;
            background-color: skyblue;
            margin-left: 300px;
        }