三列布局：两边定宽，中间自适应，充满整个屏幕

最新推荐文章于 2024-02-22 17:28:15 发布

Delicia_Lani

最新推荐文章于 2024-02-22 17:28:15 发布

阅读量439

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qq_29918313/article/details/96438212

版权

本文介绍了四种实现三列布局的方法：使用flex布局，绝对定位，自身浮动法以及圣杯布局。通过这些方法，可以创建一个两侧宽度固定，中间部分根据屏幕宽度自适应填充的页面布局。

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

一、使用flex布局

<!DOCTYPE html>
<html>
    <head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
	    html,body{
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
	    }
	 </style>
    </head>
    <body>
	<div style="display: flex;width: 100%;height: 100%;">
	    <div style="width: 100px;background: blue;">好好学习</div>
	    <div style="background: red;width: auto;flex: 1;">好</div>
	    <div style="width: 100px;background: blue;">天天向上</div>
	</div>
    </body>
</html>

二、使用绝对定位方法

绝对定位法原理是将左右两边使用absolute定位࿰