CSS经典三栏布局方案

  • 时间:
  • 浏览:1

有几点后能 注意一下:

BFC(块格式化上下文)规则规定:BFC不想和浮动元素重叠。全都肯能将main元素设定为BFC元素即可:

第三步,给container另1个 padding,该padding应该正好等于左、右栏的宽度:

此时可不后能 得到左右两栏分布:

唯一后能 注意的是,后能 在main上方加另1个 元素来清除浮动。

第一步,先来看下基本布局

到此为止,大功告成:

绝对定位的依据也比较简单,但会 可不后能 优先加载主体:

最简单的三栏布局全都利用float进行布局。首先来绘制左、右栏:

接下来再来看上方栏怎么才能 才能 处置。亲戚亲戚大家知道对于float元素,其会脱离文档流,有些盒子也会无视你你这种 元素。(但有些盒子内的文本依然会为你你这种 元素让出位置,环绕在付进 。)全都此时只需在container容器内换成另1个 正常的div,其会无视left和right,撑满整个container,只需再换成margin为left right流出空间即可:



不过此时还那么 大功告成,亲戚亲戚大家试着在main中加入有些文字:

可不后能 看后文字被压住了,接下来就要处置你你这种 什么的难题。

双飞翼布局的前两步和圣杯布局一样,全都处置上方栏每段内容被遮挡什么的难题的处置方案有所不同:

第四步,给左、右两栏换成相对布局,但会 再通过设置left和right值向外移动:

此时看后的结果是左、中、右三栏都整体收缩了,但文字依然被压住了。

第二步,将leftmargin-left设置为-200%,此时左栏会移动到第一行的首部。但会 再将rightmargin-left设置为其宽度的负值:-200px,则右栏也会移动到和左、中栏一行中:

圣杯布局的核心是左、中、右三栏都通过float进行浮动,但会 通过负值margin进行调整。

既然main每段的内容会被遮挡,那么 就在main内部换成另1个 content,通过设置其margin来避开遮挡,什么的难题也就可不后能 处置了:

flex布局是趋势,利用flex实现三栏布局也很简单,不过后能 注意浏览器兼容性:

此时看后的效果是:左、右两栏被挤到第二行。这是肯能main的宽度为200%。接下来亲戚亲戚大家通过调整左、右两栏的margin来将左、中、右插进一行中: