两列和三列布局的实现方法

最新推荐文章于 2024-11-11 17:28:03 发布

花殇

最新推荐文章于 2024-11-11 17:28:03 发布

阅读量68

点赞数

分类专栏：移动端文章标签： html css 前端

本文链接：https://blog.csdn.net/2302_76953773/article/details/129844069

版权

移动端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

两列布局

<style>

        .main{

            height: 100vh;

            background-color: aquamarine;

        }

        .col1{

            width: 300px;

            height:60%;

            float: left;

            background-color: red;

        }

        .col2{

            height: 100%;

            background-color: green;

            overflow: hidden;

        }

    </style>

</head>

<body>

    <div class="main">

        <div class="col1"></div>

        <div class="col2"></div>

    </div>

三列布局

 .main{

            height: 100vh;

            background-color: aquamarine;

            display: flex;

        }

        .col1{

            width: 200px;

            background-color: blue;

        }

        .col2{

            flex-grow: 1;

            background-color: yellow;

        }

        .col3{

            width: 200px;

            background-color: forestgreen;

        }

    </style>

</head>

<body>

    <div class="main">

        <div class="col1"></div>

        <div class="col2"></div>

        <div class="col3"></div>

    </div>

</body>