三栏布局的几种实现方式

最新推荐文章于 2023-10-01 20:09:08 发布

潇潇雨歇~

最新推荐文章于 2023-10-01 20:09:08 发布

阅读量1.2k

点赞数 3

本文链接：https://blog.csdn.net/lan128lan/article/details/103976717

版权

三栏布局算是网页中最常见的布局之一，尤其以内容为主的网站，比如CSDN、淘宝等。基本都是两侧固定宽度，中间自适应。另外，三栏布局在面试时也极容易遇到。下面介绍几种三栏布局的实现方式：效果图：1. 绝对定位特点：简单粗暴，但不推荐，这里不做详细展示说明2. 浮动 <style> .left{ backgr...

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

三栏布局算是网页中最常见的布局之一，尤其以内容为主的网站，比如CSDN、淘宝等。基本都是两侧固定宽度，中间自适应。

另外，三栏布局在面试时也极容易遇到。下面介绍几种三栏布局的实现方式：

效果图：

1. 绝对定位

特点：简单粗暴，但不推荐，这里不做详细展示说明

2. 浮动

   <style>
        .left{
            background-color: #ffb;
            float: left;
            width: 200px;
        }
        .right{
            background-color: #f65;
            float: right;
            width: 100px;
        }
        .main{
            background-color: #ccc;
            overflow: hidden;
        }
    </style>

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

最低0.47元/天解锁文章

潇潇雨歇~

关注

3
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
三栏布局的几种实现方式

三栏布局算是网页中最常见的布局之一，尤其以内容为主的网站，比如CSDN、淘宝等。基本都是两侧固定宽度，中间自适应。另外，三栏布局在面试时也极容易遇到。下面介绍几种三栏布局的实现方式：效果图：1. 绝对定位特点：简单粗暴，但不推荐，这里不做详细展示说明2. 浮动 <style> .left{ backgr...
复制链接

扫一扫