avatar 奔跑的Q丶

主题凑合用,样式即将改版...

多栏布局

现在很少接触到太多的 CSS 问题了,多数情况下 flex 都是最佳的选择,慢慢也就对基础生疏了,今天来总结下常见的布局问题。示例中关于 flex 的布局都比较简单,不理解的需要重新补习 flex 基础。本文中的示例和代码都在 codepen 上,如果加载异常请先科学上网。

具有固定宽高的布局方式在实际需求中其实很少见,一般都会有自适应的区域,接下来就来看看常用的几种布局。

两栏布局

常见的两栏布局一般是左侧固定,右侧自适应。

  1. float

  2. position

  3. table-cell

  4. flex

三栏布局

简单的三栏布局可以拆分成两栏布局嵌套两栏布局的方式设计,在此基础上如果拆分为中间元素和两侧元素的话,则需要真正的三栏布局来设计了。

首先是左右固定,中间自适应的布局。

  1. float

  2. float + margin 负值,两栏布局也可以采用这种方法

  3. position

  4. flex

另一种是中间定宽,两侧自适应的布局。这个情况需要在固定中间元素的前提下,使左右两侧浮动或者绝对定位即可,下例使用 float 做了演示,同上述例子类似,float 的元素也可以使用 position 进行绝对定位替换,这里不再演示。

等高布局

等高布局是一种要求各栏背景颜色填充至等高的样式。

  1. 两栏等高

  2. 三栏等高

以上布局如果需要流式布局,宽度替换为百分比即可。关于三栏等高布局,根据上例下图能帮助很好的理解。其中主要利用了相对定位的方式,2 层容器的 right 距离为第三栏(最右栏)元素的宽度,3 层容器的 right 距离为第二栏(中间栏)的宽度;对于子栏目来讲,它们的 left 距离均为除了第一栏(最左栏)的宽度之和。理解了原理之后,根据需要,扩展更多的子栏也可以运用同样的方式。

三栏等高布局图解

小结

本文仅仅展示了几种常见的布局结构以及对应的常用方法,自适应的布局在页面重构中很经常遇到,需要加强更多的响应式知识才能熟练。

参考资料

  1. 两栏布局,三栏布局,等高布局,流式布局
  2. 八种创建等高列布局