.两栏自适应和三栏自适应

最新推荐文章于 2024-07-22 15:13:59 发布

Clement_524

最新推荐文章于 2024-07-22 15:13:59 发布

阅读量53

点赞数

文章标签： servlet javascript html

本文链接：https://blog.csdn.net/weixin_73404129/article/details/127219900

版权

两栏自适应：左侧固定宽度右侧自适应的状态随着浏览器的窗口改变大小（左侧浮动，右侧触发BFC）三栏自适应：左右侧固定宽度中间自适应随着浏览器的窗口改变大小（左侧左浮动，右侧右浮动，中间触发BFC）

原因：浮动脱离标准流不脱离文本流，浮动的标签提升层级会覆盖正常标签

解决办法(特性6，4)：bfc就是页面上的一个独立容器，容器里面的子标签不会影响外面标签

BFC 的区域不会与 float 的标签区域重叠

触发bfc的条件触发bfc只有overflow属性能用

两栏自适应

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrap .left {
            width: 200px;
            height: 300px;
            background-color: red;
            float: left;
        }

        .wrap .right {
            height: 350px;
            background-color: aquamarine;

            /* 触发bfc */
            overflow: hidden;
            overflow: scroll;
            overflow: auto;


            /* 以下不能用 */
            /* float: left;
            float: right; */

            /* display: inline-block; */

            /* position: absolute;
            position: fixed; */

        }

      
    </style>
</head>

<body>
    <div class="wrap">
        <div class="left">left</div>
        <div class="right">出师表出师表出师出师表出师出师表出师出师表出师出师表出师出师表出师出师表出师出师表出师出师表出师表出师表出师表</div>
    </div>
</body>

</html>

三栏自适应

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrap .left {
            width: 200px;
            height: 200px;
            background-color: red;
            float: left;

        }

        .wrap .right {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            float: right;
        }

        .wrap .center {

            height: 300px;
            background-color: pink;

            /* 触发bfc */
            overflow: hidden;
            overflow: scroll;
            overflow: auto;


            /* 以下不能用 */
            /* float: left;
            float: right; */

            /* display: inline-block; */

            /* position: absolute;
            position: fixed; */
        }

        /* • 原因：浮动的标签会覆盖正常标签 • 
        解决办法(特性4)：BFC的区域不会与float的标签区域重叠 */
    </style>
</head>

<body>
    <div class="wrap">
        <div class="left">left</div>

        <div class="right">right </div>
        <div class="center">center哈哈哈哈哈哈哈哈呵呵呵哈哈哈呵呵呵哈哈哈呵呵呵哈哈哈呵呵呵哈哈哈呵呵呵呵呵呵</div>
    </div>
</body>

</html>