三列布局,左右宽度固定,中间一列随浏览器窗口变化宽度
以前在网上看到过,说这个问题是一道经典的笔试/面试题。当时在百度面试的时候果然就遇到过。昨天在兰亭的时候果然又遇到了。其实,这个题目确实考到了Css几个方面的很重要的基础知识。首先考到了定位中的方法中的文档流和浮动流,然后考到了文档流和浮动流默认宽度和显示层级(我一般理解成index这种含义,或者画布中的上下层一样,浮动流会居于上层,文档流会居于下层,因此浮动流区块可能会部分遮住文档流区块,但是文档流在下面是依然存在的,只是被遮住了而已)。
首先写出两个div,让第一个div左浮动,第二个div右浮动,第三个div直接以文档流去定位。由于第一个和第二个div是浮动流定位,所以会脱离文档流,并且第一个div会浮动到父容器区域的左边,第二个div会浮动到父容器的右边,在一排中显示。这时候第三个div由于是文档流定位的,且如果不设宽度或默认成100%,会随着浏览器窗口变化宽度的,因此前面两个浮动流区块会部分遮住此文档流区块,这时只用对此区块设置左右margin即可。
代码如下:
无标题文档 - 锐客网
【三列布局,左右宽度固定,中间一列随浏览器窗口变化宽度】
推荐阅读
- 织网布局,社群营销走进山东玖零落地企业
- 两三老友|两三老友 足矣
- 瀑布流布局
- 2018-12-03-新手教程重构思路
- 详解布局Masonry
- 20.小程序(布局适配方案(rpx、px、vw、vh))
- 数据透视表布局及美化
- Flutter开发之布局Widget
- BitShares|BitShares 2.0、Steemit 2.0、BitUSD 2.0……BM在EOS上布局很大!
- Web前端如何学习?