BaiduIFE2017-三栏式布局的实现

@spiritree  March 9, 2017

三栏式布局的n种实现

本文的实现思路主要来自上文

利用两侧浮动都不占据文档流:

左栏左浮动,右栏右浮动,中间栏左右margin值等于左右栏宽度。html中,中间栏要放在左右边栏的后边。道理上和绝对定位差不多,就是不占文档流了其他元素就填充上了,只要把两边留出空间不导致重合即可。

  • 如果使用浮动来进行三栏布局,则浮动的列要写在固定列的前面

清除浮动(clearfix)

最典型的问题就是一个父元素包含了多个浮动的子元素。页面的内容设置了一个宽度,子元素的浮动确定了他们的位置,但浮动元素不会影响父元素的宽度。这样做会让父元素塌陷,从而使父元素的高度为“0”,以及忽略其他的属性。浮动典型问题 © w3cplus.com

清除浮动是指:一个元素比包含它的元素还高并且使用了float,它就溢出到了容器外面。

简易的clearfix方法:
`
.clearfix {
overflow: auto;
}
`

清除浮动黑科技完全解读

响应式布局

媒体查询

响应式设计(Responsive Design) 是一种让网站针对不同的浏览器和设备“呈现”不同显示效果的策略,这样可以让网站在任何情况下显示的很棒!

媒体查询是做此事所需的最强大的工具。让我们使用百分比宽度来布局,然后在浏览器变窄到无法容纳侧边栏中的菜单时,把布局显示成一列。

详细代码


添加新评论