圣杯布局与双飞翼布局

最新推荐文章于 2024-06-11 14:46:29 发布

杨乐多dreamer

最新推荐文章于 2024-06-11 14:46:29 发布

阅读量1.8k

点赞数 2

分类专栏：项目问题汇总文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_44743216/article/details/126122370

版权

本文探讨了圣杯布局和双飞翼布局两种经典的三列布局方案。圣杯布局注重中间内容的优先渲染，适用于PC端，但存在浏览器窗口缩小时布局混乱的问题。双飞翼布局通过额外的内层容器解决了这个问题，简化了代码，并避免了布局混乱的状况。

摘要由CSDN通过智能技术生成

圣杯布局

圣杯布局是三列布局，中间宽度自适应，两边定宽，这样做的优势是重要的东西放在文档流前面可以优先渲染。也就是在html文档中，中间的部分要写在左右布局之前。
当然，这种布局是面向PC端的，移动端由于屏幕宽度较小，不推荐多列布局。
在这里插入图片描述
DOM结构：

	<div class="header">Header</div>
	<div class="bd">
	    <div class="main">Main</div>
	    <div class="left">Left</div>
	    <div class="right">Right
	    </div>
	</div>
	<div class="footer">Footer</div>

1、浮动 + margin-left 的负值（最常用）

<style>
    *{
   
      margin: 0;
      padding: 0;
    }
    html, body {
   
      width: 100%;
      height: 100%;
    }
    .header,
    .footer {
   
      width: 100%;
      height: 80px;
      line-height: 80px;
      background-color: antiquewhite;
      text-align: center;
    }
    /* 中间布局的样式 */
    .content {
   
      height: calc(100% - 160px);
      /* 根据左边栏和右边栏的宽度设置padding,留出位置放left和right */
      padding: 0 150px 0 200px;