圣杯布局详解

原理说明:

  • 主面板设置宽度为100%,主面板和两个侧栏都设置浮动,常见为左浮动,这个两个侧栏会被主面板挤下去,通过设置负边距将浮动的侧栏拉上来,左侧栏的负边距为100%,刚好是窗口的宽度,因此会从主面板下面的左边跑到与主面板对齐的左边,右侧栏此时浮动在主面板下面的左边,设置负边距为负的自身宽度刚好浮动到主面板对齐的右边。
  • 为了避免侧栏遮挡主面板内容,在外层设置左右padding值为左右侧栏的宽度,给侧栏腾出空间,此时主面板的宽度减小。由于侧栏的负边距是相对主面板的,所以两个侧栏并不会像我们理想中的停靠在左右两边,而是跟着缩小的主面板一起向中间靠拢,此时使用相对布局,调整两个侧栏到相应的位置。

html

<div class="container">
  <div class="main"></div>
  <div class="sub"></div>
  <div class="extra"></div>
</div>

布局步骤:

  1. 三者都设置向左浮动
  2. 设置main宽度为100%,设置两侧栏的宽度
  3. 设置负边距,sub为负左边距为100%,extra设置负左边距为自身宽度
  4. 设置main的padding值为左右两个面板留出空间
  5. 设置两个侧栏为相对定位,sub的left值为负的sub宽度,extra的right值为负的extra宽度

css

.container{
padding:0 230px 0 190px;
}
.main{
float:left;
width:100%;
}
.sub{
float:left;
width:190px;
margin-left:-100%;
position:relative;
left:-190px;
}
.extra{
float:left;
width:230px;
margin-left:-230px;
position:relative;
right:-230px;
}

ps:DOM元素的书写顺序不得更改

end

一盏灯, 一片昏黄; 一简书, 一杯淡茶。 守着那一份淡定, 品读属于自己的寂寞。 保持淡定, 才能欣赏到最美丽的风景! 保持淡定, 人生从此不再寂寞。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 目录 常用居中垂直居中水平居中垂直水平居中 单列布局 双列&三列布局 常用居中 垂直居中 单行文本垂直居中 图片垂...
    听城阅读 3,265评论 1 2
  • CSS布局 布局是CSS中一个重要部分,本文总结了CSS布局中的常用技巧,包括常用的水平居中、垂直居中方法,以及单...
    web前端学习阅读 5,534评论 1 38
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,693评论 1 92
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 8,706评论 1 41
  • 一男子追一辆公交,骑电车的两位男子,大喊加油,男子听后倍感鼓舞,奋马急追。然而此时,两位男子大喊加油加油啊,师...
    久伴尔旁5阅读 1,486评论 0 0

友情链接更多精彩内容