css三列自适应布局怎么写？教你几种办法
发布时间：2022-04-18 14:27:22 所属栏目：语言 来源：互联网
导读：css怎么写三列自适应布局？在做前端开发的时候我们经常会使用三列布局，那么两边固定，中间自适应的三列布局要怎么写呢？下面是小编整理的多种实现方法，有需要的朋友可以看一下。 前言 为了按照常规WEB布局，这里全部采用拥有header和footer模式进行左中右
|
css怎么写三列自适应布局？在做前端开发的时候我们经常会使用三列布局，那么两边固定，中间自适应的三列布局要怎么写呢？下面是小编整理的多种实现方法，有需要的朋友可以看一下。 前言 为了按照常规WEB布局，这里全部采用拥有header和footer模式进行左中右布局编写。 第一种：基于float实现 实现思路 常规思路，使左右两个Aside分别浮动至左右两侧即可 代码实现 <!-- HTML部分 --> <div class="container"> <!-- 顶部Header --> <header>这里是头部</header> <!-- 中间aside及content --> <div class="middle clearfix"> <aside class="left"></aside> <aside class="right"></aside> <!-- 中间content显示内容 为了防止将右侧挤下去故放置在右侧栏下方 --> <div class="content">这里是内容</div> 第二种：基于position：absolute实现 实现思路 为中间三栏父级赋予position: relative，赋予左右Aside position: absolute，并且分别赋予left: 0 right: 0 width:自定义值，赋予中间content left，right 分别等于左右width即可 代码实现 <!-- HTML相关代码 --> <div class="container"> <!-- 顶部Header --> <header></header> <div class="middle"> <!-- 左侧Aside --> <aside class="left"></aside> <!-- 中间content内容 --> <div class="content">这里是内容</div> <!-- 右侧Aside --> <aside class="right"></aside> </div> （编辑：济南站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
