<!DOCTYPE html>
<html lang="en">
<head><title>圣杯布局</title><style>/* 所谓圣杯布局，就是三个盒子 两边固定宽度，中间宽度自适应的pc端常用布局 */*{padding: 0;/* 去body自带8像素的margin值 */margin: 0;}.content{/* 给三个盒子外套的盒子加上，两边盒子等宽的padding值 为了让左右盒子到两边后，不影响中间盒子中数据的显示。 */padding:0 190px 0 150px;}.main{width: 100%;background-color: red;float: left;}.left{width: 150px;float: left;background-color: green;/* 让左边盒子显示在外盒子的左padding处 */margin-left: -100%;position: relative;left: -150px;}.right{width: 190px;background-color: blue;float: left;/* 让右边盒子显示在外盒子的右padding处 */margin-left: -190px;position: relative;right: -190px;}</style>
</head>
<body><div class="content"><div class="main">main</div><div class="left">left</div><div class="right">right</div></div>
</body>
</html>
本文发布于:2024-02-04 22:44:45，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170718072760386.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
