圣杯布局的骚写法
笔试的时候，倒在了布局上，实现圣杯布局
刚开始搞过，当时也是别人的方法，所以，对整个需求和实现都记的不清了。
现在总结一下，另外附上自己最简单的写法：
圣杯布局的目的
1.三栏展示
2.让中间的div优先加载，中间的div在dom中要提前
实现方式
我看了一下网上了，思路都很乱
我来个简单的吧
1.将calc进行到底
2.使用margin负值
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<div class="main">2222</div>
<div class="left">1111</div>
<div class="right">333</div>
</div>
<style>
/* 使用calc+margin负值 */
.main{
height: 800px;
float: left;
background: #000;
width: calc(100% - 200px);
margin-left: 100px;
}
.left{
height: 800px;
float: left;
background: red;
width: 100px;
/* 在不考虑性能的情况下，在css中计算，这里将calc进行到底，感觉比网上的逻辑清晰很多 */
margin-left: calc(-100% + 100px);
}
.right{
height: 800px;
float: left;
background: green;
width: 100px;
}
</style>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 单元测试从入门到精通