最近组队报名参加了百度前端技术学院,里面有针对学习前端各个不同阶段的任务,然后在git上推送自己写的任务代码,也可以查看别人的代码,通过这种方式来相互学习。然后我选了几个任务,其中就有一个是div+css三栏式布局的。由于以前自学的时候过于笼统,然后许多东西就是一知半解,很多时候就是为了效果而去写代码,并不很清楚原理是什么,也没有对不同的方法进行分类和总结,但参加了这个之后,看到许多别人写的用不同的方法实现效果的代码以及别人提的一些学习建议,才真正意识到这个问题的严重性。下面,就从这次的div+css三栏式布局开始总结吧。
三栏式布局里面也有很多种,一般由子列,主列和附加列构成,这次要实现的是中间自适应宽度+两边固定宽度+父元素的高度由子元素中最大高度决定。
我是这样实现的:将left和right分别浮动到左边和右边,然后content设置左右外边距。必须注意的是left和right部分要写在content的前面,先把位置占好,才不会被content挤出去。