html 两列布局之宽度高度自适应解析（妙）

最新推荐文章于 2023-02-02 19:09:05 发布

前端小峰

最新推荐文章于 2023-02-02 19:09:05 发布

阅读量598

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML 前端技术文章标签： html css

本文链接：https://blog.youkuaiyun.com/Shaoyouiqng/article/details/114780715

前端技术同时被 2 个专栏收录

39 篇文章

订阅专栏

HTML

4 篇文章

订阅专栏

本文探讨了四种实现HTML两列布局的方法，包括margin+float、display: flex、display: table & display: table-cell以及relative+absolute布局。针对高度自适应的需求，作者提供了在各布局中实现高度自适应的技巧，例如使用margin负值配合overflow隐藏，以及移除父级高度限制等。这些布局方案对于PC端网页设计十分实用。

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

1、前言

在我们整个PC端的项目上，有很多的主页面布局采用的是两列布局，左侧定，右侧自适应；或者右侧定，左侧自适应

2、上代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style>

        body {
            color: #fff;
        }

        .fixed-width {
            margin-bottom: 10px;
            color: #000;
        }

        .split {
            height: 10px;
        }

        /* float + margin */
        .f-content {
            height: 200px;
        }

        .f-left {
            float: left;
            width: 200px;
            height: 100%;
            background: red;
        }

        .f-right {
            margin-left: 200px;
            /*width: 100%;*/
            height: 100%;
            background: blue;
        }

        /* position */
        .p-content {
            height: 200px;
            position: relative;
            padding-left: 200px;
        }

        .p-left {
            position: absolute;
            left: 0;
            top: 0;
            width: 200px;
            height: 100%;
            background: red; 
        }

        .p-right {
            /* width: 100%; */
            height: 100%;
            background: blue;
        }

        /* table布局 */
        .t-content {
            display: table;
            width: 100%;
            height: 200px;
        }

        .t-left {
            display: table-cell;
            width: 200px;
            background: red;
        }

        .t-right {
            display: table-cell;
            background: blue;
        }

        /* flex */
        .x-content {
            display: flex;
            height: 200px;
        }

        .x-left {
            width: 200px;
            background: red;
        }

        .x-right {
            flex: 1;
            background: blue;
        }
    </style>
</head>

<body>

    <!-- setting -->
    <div class="fixed-width">
        <span>左边宽度：</span> <input type="text" id="fixed-left-width" name="name" value="" οnchange="fixedLeftChange()">
    </div>

    <!-- float + margin -->
    <div class="f-content">
        <div class="f-left" id="f-left">f-left</div>
        <div class="f-right" id="f-right">f-right</div>
    </div>

    <div class="split"></div>

    <!-- position -->
    <div class="p-content" id="p-content">
        <div class="p-left" id="p-left">p-left</div>
        <div class="p-right">p-right</div>
    </div>

    <div class="split"></div>

    <!-- table布局 -->
    <div class="t-content">
        <div class="t-left" id="t-left">t-left</div>
        <div class="t-right">t-right</div>
    </div>

    <div class="split"></div>

    <!-- flex -->
    <div class="x-content">
        <div class="x-left" id="x-left">x-left</div>
        <div class="x-right">x-right</div>
    </div>

    <script type="text/javascript">

        function fixedLeftChange() {
            const $fixed = document.getElementById('fixed-left-width')
            const leftWidth = $fixed.value

            // float
            document.getElementById('f-left').style.width = leftWidth + 'px'
            document.getElementById('f-right').style.marginLeft = leftWidth + 'px'

            // position
            document.getElementById('p-content').style.paddingLeft = leftWidth + 'px'
            document.getElementById('p-left').style.width = leftWidth + 'px'

            // table
            document.getElementById('t-left').style.width = leftWidth + 'px'

            // flex
            document.getElementById('x-left').style.width = leftWidth + 'px'
        }
    </script>
</body>

</html>

![](https://img-blog.csdnimg.cn/20210314113824329.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NoYW95b3VpcW5n,size_16,color_FFFFFF,t_70