5种CSS方式实现三栏布局

最新推荐文章于 2022-12-26 20:53:25 发布

asd3331380

最新推荐文章于 2022-12-26 20:53:25 发布

阅读量210

点赞数 1

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

本文链接：https://blog.csdn.net/asd3331380/article/details/121513400

版权

本文介绍了使用浮动布局、绝对定位、弹性盒子、网格布局和表格布局五种方式来实现三栏布局，其中浮动布局包括圣杯布局和双飞翼布局，详细解析了每种方法的HTML结构和CSS代码，特别强调了网格布局和弹性盒子在创建复杂页面布局方面的优势。

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

转自：微点阅读（www.weidianyuedu.com）微点阅读 - 范文大全 - 免费学习网站

在网页布局中，三栏布局是一种常见的布局方式，尤其在 PC 端。如下图所示。

三栏布局

从上到下由页头、内容和页脚组成，内容由左、中、右三列组成，其中左右两列的宽度固定，中间一列自适应。假设左右宽度是 100px，header 和 footer 的高度是 60px。

下面介绍五种方式，分别是：浮动、绝对定位、flex-box 和 grid-box 和表格布局。

HTML 骨架如下：

<main>    <header>header</header>    <article>        <section class="left">left</section>        <section class="center">center</section>        <section class="right">right</section>    </article>    <footer>footer</footer></main>