在上一章中，我们按先大后小，先行后列的法则，进行了第一个最简单的照片墙开发。如果你很轻松的自行完成了上一节的任务，那么恭喜你 — 干的不错！

无论多么复杂的网页，最终都可以按“先大后小，先行后列”的法则来进行规划。我们可以随意的打开一个站点来进行验证。

是的，没有特别深的技术含量。做网页编程本来就是在做照片墙。本节，让我们共同用语言来描述以下照片墙。

先大

代码描述：画一个大大的框。

后小, 先行

代码描述：

• 画一个大大的框。
• 上下分成两行，编号1，2.

后列

代码描述：

• 画一个大大的框。
• 上下分成两行，编号1，2.
  • 将1划分为3列，编号为1.1, 1.2, 1.3
  • 将2划分为4列，编号为2.1, 2.2, 2.3, 2.4

全部拆分

我们再按照上面的原则对照片墙中的照片墙进行划分，最后将得到以下结果。

最终代码描述如下：

• 上下分成两行，编号为：行1，行2.
  • 将行1划分为3列，编号为:列1.1, 列1.2, 列1.3
    • 将列1.1划分为2行，编号为行1.1.1, 行1.1.2
      • 将行1.1.1划分为2列，编号为列1.1.1.1，列1.1.1.2
    • 将列1.2划分为2行，编号为行1.2.1， 行1.2.2
  • 将行2划分为4列，编号为列2.1, 列2.2, 列2.3, 列2.4

此时，当我们把以上描述发给自己小的伙伴。他是能够非常清晰的了解你的空间具体划分的。如果我们再告诉他，哪张照片应该放哪个位置的话，一个布局一致的照片墙就出来了。