圣杯布局和双飞翼布局

98 阅读1分钟

圣杯布局

分出三个div,两边固定,中间自适应

image.png

  • 1写好基本的样式 image.png image.png
  • 2将container下的所有div元素向左浮动

image.png

  • 3利用margin-left的负值将div拉至行头和行尾

image.png

image.png

  • 4.在position:relative 下的left和right属性,将左右两个div分别左移和右移

image.png

image.png 双飞翼布局

image.png image.png image.png 需要将三个div分别浮动,利用margin-left的负值将左右div拉至行头和行尾,最后用margin来解决元素的覆盖 image.png