任何一个学习前端的同学都离不开网页的布局，而学习网页布局最先遇到的一个大问题就是三列布局。三列布局看似简单，确包含了很多知识点。文档流和定位的问题。
方法/步骤
-
1
先写好基本样式，以及效果图
-
2
第一种方法：首先写出两个div，让第一个div左浮动，第二个div右浮动，第三个div直接以文档流去定位。由于第一个和第二个div是浮动流定位，所以会脱离文档流，并且第一个div会浮动到父容器区域的左边，第二个div会浮动到父容器的右边，在一排中显示。这时候第三个div由于是文档流定位的，且如果不设宽度或默认成100%，会随着浏览器窗口变化宽度的，因此前面两个浮动流区块会部分遮住此文档流区块，这时只用对此区块设置左右margin即可。
-
3
第二种方法：省去了float,直接用positon去定位。
END
经验内容仅供参考，如果您需解决具体问题(尤其法律、医学等领域)，建议您详细咨询相关领域专业人士。
作者声明：本篇经验系本人依照真实经历原创，未经许可，谢绝转载。
展开阅读全部
文章评论