左边浮动,右边自适应布局

jzsn
  • 203

一直有个问题困恼着我,就是这个实现左边布局,右边自适应的方案,
他的实现原理是:左边div设置浮动,右边div设置宽度为100%;
疑惑的是,右边的div的100%不是相对于整个html而言的吗?这样为啥不会出现滚动条?
代码预览如下:
http://jsrun.net/iaXKp

谢谢大佬释疑

回复
阅读 1.1k
5 个回答

把左边的div设置为半透明试试

你在左边框加个 margin-top: 10px; 就知道了。

右边的宽度是100%,但是由于你的左边的div浮动,相当于和本身的层级发送了变化,右边的div会在左边的下面,但是文字会被挤过来。实际上div的宽度本就是100%,你可以设置左边div,display:none;你就可以看到右边宽度是多少

重叠在一起了,完全是视觉上导致的错觉。设定样式,将两个div上下错开一点点就看到了。或者设置透明度。

了解一下BFC,你就懂了

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏