为了账号安全,请及时绑定邮箱和手机立即绑定

“固定宽度列的高度>自适应宽度的列”这哪跟哪啊(=@__@=)?

正在回答

2 回答

又仔细研究下 ,上个回答说的也不是太对,觉得跟宽度没有关系,固定宽度的列可以应用position:absolute,就像我觉得例子,左列固定宽度,应用绝对定位。不固定宽度的列也可以应用position:absolute,就像老师的例子,sidebar固定宽度,没有应用绝对定位,content不固定宽度,应用了绝对定位。

我觉得关键在于,应用了position:absolute的列的高度要小于没有应用position:absolute的列的高度,才能保证没有应用绝对定位的列高度能撑起父元素高度,才能把应用绝对定位的列高度包括进去。

0 回复 有任何疑惑可以回复我~

这个老师应该是说错了吧 我觉得应该是固定宽度(也就是应用position:absolute的列)的列的高度要小于自适应宽度的列

比如说 对左面的列(width:200px;height:600px),应用position:absolute,他就会从文档流中抽离,相当于没有这列。

右面的列要自适应宽度 ,所以不设置width。height:400px,margin-left:210px 。

先说宽度,右面的列会忽视左面的列存在,它的margin-left是相对于父元素左边框设定的,看起来应该是距离左列10px。

再说高度,由于左列脱离文档流,相当于没有高度,父元素的高度取决于右列的高度,但是右列高度小于左列高度,导致整个父元素高度包不住左列高度,更严重的,要是这两个横向排列的列下面还有元素,该元素会挨着右列下方显示,也被左列覆盖一部分。

总体情况如下图:

http://img1.sycdn.imooc.com//55c062ab000128c509740613.jpg

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
网页布局基础
  • 参与学习       214705    人
  • 解答问题       1756    个

让你精通CSS中三大定位机制,彻底掌握网页布局的相关知识

进入课程
意见反馈 帮助中心 APP下载
官方微信