CSS浮动和负margin的对比,圣杯布局,双飞翼布局

浮动 VS 负margin

对于相邻的两个浮动元素,如果因为空间不够导致第二个浮动元素下移,可以通过给第二个浮动元素设置margin-left: 负值;来让第二个元素上移,其中这个负值>=元素上移后和第一个元素重合的临界值。

CSS浮动和负margin的对比,圣杯布局,双飞翼布局_第1张图片
三个浮动元素
CSS浮动和负margin的对比,圣杯布局,双飞翼布局_第2张图片
给最后一个元素设置了负margin之后

实例:水平等距排列


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

圣杯布局

即三列布局,两边固定宽度,中间宽度自适应,并且中间内容的元素在DOM元素次序中是优先位置



main
left
right

你可能感兴趣的:(CSS浮动和负margin的对比,圣杯布局,双飞翼布局)