双飞翼布局和圣杯布局解析

今天突然想起了温习一下css布局。之前看双飞翼布局只是粗略的看了一下,大概明白怎么做,但是并没有去延伸一下...还有它的孪生兄弟:圣杯布局。今天仔细的琢磨了一下;突然发现其实内容还不少的样子。

双飞翼布局或者说圣杯布局它们都是三列布局;(一列自适应和两列固定列)。当然,除了三列布局,还有一列布局(自适应居中)、两列布局(一列自适应一列固定列)。

其他两种都相对来说简单些。就着重说一下三列布局。

一、双飞翼布局

           先给出效果图: 

              其中中间一部分是自适应宽度,其他两列是固定列大小。

        

双飞翼布局和圣杯布局解析

     有两种方式可以实现布局,这是第一种;另外一种方式其实和第一种没有多大的差别。只是一个用的margin一个用的padding      

    body代码:

双飞翼布局和圣杯布局解析

   style代码部分

       在这部分中,布局利用了margin-left为负值来完成;详细的在代码中说明

双飞翼布局和圣杯布局解析

双飞翼布局和圣杯布局解析

双飞翼布局和圣杯布局解析

     第二种实现方法类似第一种,不过做一点微调

     body代码:

双飞翼布局和圣杯布局解析

在中间列的里面加一个内部的div盒子,用它来装内容。

style代码部分:

  前面的一模一样。在.main那里开始变化;最后给inner加一个样式就ok。

双飞翼布局和圣杯布局解析

二、圣杯布局

     它和双飞翼相似。但是实现的思想略有一点不同。

body部分:

双飞翼布局和圣杯布局解析

style代码部分:

双飞翼布局和圣杯布局解析

双飞翼布局和圣杯布局解析

双飞翼布局和圣杯布局解析

第二种实现方法纯属我按照自己的想法来解释和实现,是我自己的一个理解。实现的效果是相同的,是我自己在测试的时候,发现.container设置内边距和设置外边距的效果是相同的。但是就只改变padding为margin的话,效果如下图

双飞翼布局和圣杯布局解析

纳里。。什么意思?两边的列呢?打开盒模型检查的时候发现,两边的列是好好的呆在两边的啊。乍一看!原来是被隐藏掉了。我只改变了padding为margin。然后两边就被

隐藏掉了。找了半天。问题出现了在overflow:hidden的那里,因为我这时候为container设置的是外边距:即container和其他外围盒子之间的距离。当给两列设置偏移量时是补外边距的空白。将两列放在了外边距中就会产生内容溢出的问题,这样用overflow:hidden的话,就会隐藏溢出的内容;自然就看不见了固定的两列。方法就是换一种方法来清除浮动。这里我直接给footer元素加上clear:left;就清除了浮动就ok了。得到效果图:

双飞翼布局和圣杯布局解析

相关推荐