编程知识 cdmana.com

CSS布局(五)之圣杯布局和双飞翼布局

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"往期推荐:","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"「","attrs":{}},{"type":"link","attrs":{"href":"https://juejin.cn/post/7028214235083571237","title":"","type":null},"content":[{"type":"text","text":"CSS布局之全屏布局","attrs":{}}]},{"type":"text","text":"」","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"「","attrs":{}},{"type":"link","attrs":{"href":"https://juejin.cn/post/7028594112873889800","title":"","type":null},"content":[{"type":"text","text":"CSS布局(二)之多列布局","attrs":{}}]},{"type":"text","text":"」","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"「","attrs":{}},{"type":"link","attrs":{"href":"https://juejin.cn/post/7028929502994513928","title":"","type":null},"content":[{"type":"text","text":"CSS布局(三)之等分布局","attrs":{}}]},{"type":"text","text":"」","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"「","attrs":{}},{"type":"link","attrs":{"href":"https://juejin.cn/post/7029296320233897991","title":"","type":null},"content":[{"type":"text","text":"CSS布局(四)之文本布局","attrs":{}}]},{"type":"text","text":"」","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":"前言","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":"圣杯布局和双飞翼布局","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"圣杯布局和双飞翼布局和布局也算是一种很经典的布局了吧,都是有左中右三列组成的,左右两列固定,中间自适应,高度固定且相等。接下来让我们看看是怎么实现的把。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/b2/b2d25332a2dc20cc7f3b2a129a81de27.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"
\n
\n
\n
\n
\n","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"通过float和margin/pading 实现","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"大体上圣杯布局和双飞翼布局是一样的,但细节上还是有不一样的地方。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"相同点:","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"通过中间列自适应,来完成。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"通过float来使左右两列向左向右浮动。","attrs":{}}]}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"不同点:","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"圣杯布局:父节点通过padding为左右列位置。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"双飞翼布局:中间列通过margin来为左右两列留出位置。","attrs":{}}]}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"注意:因为浮动节点如果高于前面或平级的非浮动节点,会导致浮动节点下沉。所以在编写HTML的时候,要把中间列挪到右列节点后面。","attrs":{}}]}],"attrs":{}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"圣杯布局","attrs":{}}]},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":".layout {\n width: 1000px;\n height: 800px;\n padding: 0 200px;\n .layout-left {\n float: left;\n width: 200px;\n height: 100%;\n margin-left: -200px;\n background-color: crimson;\n }\n .layout-right {\n float: right;\n width: 200px;\n height: 100%;\n margin-right: -200px;\n background-color: yellow;\n }\n .layout-center {\n height: 100%;\n background-color: blue;\n }\n}\n","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"双飞翼布局","attrs":{}}]},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":".layout {\n width: 1000px;\n height: 800px;\n .layout-left {\n float: left;\n width: 200px;\n height: 100%;\n background-color: crimson;\n }\n .layout-right {\n float: right;\n width: 200px;\n height: 100%;\n background-color: yellow;\n }\n .layout-center {\n margin: 0 200px;\n height: 100%;\n background-color: blue;\n }\n}\n","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"通过flex实现","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"通过flex实现还是非常简单的,中间列设置flex:1即可自适应。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"
\n
\n
\n
\n
\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":".layout {\n display: flex;\n width: 1000px;\n height: 800px;\n .layout-left {\n width: 200px;\n background-color: crimson;\n }\n .layout-right {\n width: 200px;\n background-color: yellow;\n }\n .layout-center {\n flex: 1;\n background-color: blue;\n }\n}\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"好,今天就到这里了,今天努力的你依然是最棒的。加油,加油,你最棒!加油,加油,你最强!哦豁,Bye Bye!!!","attrs":{}}]}]}

版权声明
本文为[InfoQ]所创,转载请带上原文链接,感谢
https://xie.infoq.cn/article/83039d009f5dd7068e645577a

Scroll to Top