圣杯布局的两种实现

实现效果：网页窗口在缩放过程中，三栏布局两边的盒子宽度是固定的，中间的盒子的宽度是自适应的。

1.margin负值+float


html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<style>
			.container {
				padding-left: 100px;
				padding-right: 100px;
			}
			
			.container div {
				float: left;
			}
			
			.main {
				width: 100%;
				height: 200px;
				background-color: pink;
			}
			
			.left {
				position: relative;
				left: -100px;
				width: 100px;
				height: 200px;
				margin-left: -100%;
				background-color: skyblue;
			}
			
			.right {
				width: 100px;
				height: 200px;
				margin-right: -100px;
				background-color: aqua;
			}
		style>
	head>
	<body>
		<div class="container">
			<div class="main">div>
			<div class="left">div>
			<div class="right">div>
		div>
	body>
html>

2.flex布局实现


html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<style>
			.container {
				display: flex;
			}
			
			.left {
				width: 200px;
				height: 200px;
				background-color: pink;
			}
			
			.right {
				width: 200px;
				height: 200px;
				background-color: skyblue;
			}
			
			.center {
				flex: 1;
				height: 200px;
				background-color: purple;
			}
		style>
	head>
	<body>
		<div class="container">
			<div class="left">div>
			<div class="center">div>
			<div class="right">div>
		div>
	body>
html>

相关阅读:
【Linux】进程通信 | 管道
Redis 事务
让所有GUI都自动化-PyAutoGUI（GUI自动化工具）
Tomcat7+ 弱口令 && 后台getshell漏洞
Mysql中索引详解
郑州什么企业会使用灵活用工平台？
CCF CSP认证历年题目自练Day36
QNX Typed memory介绍
Android6.0+修改通知栏与页面样式保持一致
电脑查看打印机ip地址的三种方法

原文地址：https://blog.csdn.net/m0_62962469/article/details/126923980