优先加载主体内容
基本思路是：让中间部分在结构中位于最前面，先让中间层100%宽度，占满同一高度的空间，此时 左右两层被挤至下层，然后给左右盒子设置负边距，将左右栏拉回与主体部分同一水平高度 。这时主体部分有一部分被遮挡住了，给包含三个盒子的父盒子设置margin或padding，给左右边栏留出位置 ，再接着将左右边栏设置相对定位，将它们移到对应的空白位置。
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>圣杯布局</title> <style type="text/css"> *{ text-align: center; } .container{ margin-left: 120px; margin-right: 220px; } .main{ float: left; width:100%; height:200px; background-color: rosybrown; } .left{ float:left; width:100px; height:200px; margin-left:-100%; position:relative; left:-120px; background-color: red; } .right{ float:right; width:200px; height:200px; margin-left:-200px; position:relative; right:-220px; background-color: blue; } </style> </head> <body> <div class="container"> <div class="main">main</div> <div class="left">left</div> <div class="right">right</div> </div> </body> </html>
页面效果
--------------------- 本文来自 想上天的蓝胖子 的CSDN 博客 ，全文地址请点击：https://blog.csdn.net/ll_0801xyz/article/details/77320137?utm_source=copy
146
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
