常见布局-三栏布局

两侧两列固定宽度,中间列自适应宽度

常见布局-三栏布局_第1张图片
image.png



  
  三列
  


  
aside
content

实现demo

为什么要加margin-left和margin-right?
为了使main的内容可以正常显示,不容会被左右浮动的menu和aside遮盖住一部份

为什么不是main在前面?
如果main在前,因为main为块级元素。浏览器渲染时,会将它独占一行,那么接下去的两个浮动元素就会在main的下面一行进行浮动,无法实现浮于main 上方的效果。

圣杯布局

圣杯布局解决了什么问题?
使得三栏布局中间的区块可以在在dom元素次序中优先位置。

实现
注释编号为实现顺序

  

  
main
aside
extra

实现demo
缺点
.main的最小宽度不能小于.aside的宽度。原因为margin-left: -100%;不足以偏移掉整个元素的宽度。

双飞翼布局

所以有了双飞布局来解决圣杯布局这个缺点

实现
注释编号为实现顺序


  
  
main
aside
extra

实现demo

你可能感兴趣的:(常见布局-三栏布局)