网页三栏布局五种实现方式（左中右）

最新推荐文章于 2023-04-12 00:24:31 发布

xinxin_zhu

最新推荐文章于 2023-04-12 00:24:31 发布

阅读量3k

点赞数 2

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/xinxin_zhu/article/details/105972502

版权

适用：高度固定左右宽度固定中间自适应

<html>

<head>
    <title>三栏布局</title>
    <meta charset="utf-8">
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .layout article div {
            min-height: 100px;
        }
    </style>
</head>

<body>
    <section class="layout float">
        <style>
            .layout.float .left-right-center .left {
                float: left;
                width: 300px;
                background-color: blue
            }

            .layout.float .left-right-center .right {
                float: right;
                width: 300px;
                background-color: red;
            }

            .layout.float .left-right-center .center {
                overflow: auto;
            }
            .layout.float .left-right-center::after{
                content: '';
                display: block;

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

xinxin_zhu

关注关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
网页三栏布局五种实现方式（左中右）

适用：高度固定左右宽度固定中间自适应<html><head> <title>三栏布局</title> <meta charset="utf-8"> <style> * { padding: 0; margin: 0; ...
复制链接

扫一扫