页面两栏布局(草稿)

橙三吉。 提交于 2019-11-26 12:36:11

一边整理一边记忆

学习:https://blog.csdn.net/baidu_36065997/article/details/80279305

4种情况:

一栏定宽   一栏自适应

一栏不定宽  一栏自适应

两栏等高

左右宽度比 1:2,右边 分上下结构,高度比 1:1

左侧定宽,右侧自适应

方法一:

设置 两个高度相同

左边 float:left,设置宽度a

右边不设置宽度,但 margin-left:a

(块级元素 流式特性)

方法二:

设置 两个高度相同;

左边 float:left

右边 overflow:hidden(用 overflow:hidden触发的 bfc 清除 左边 产生的浮动影响)

(作者 下面的话我觉得更好理解:原话——不与浮动元素交集,自动退到 浮动元素宽度之外)

作为普通元素的流体特性依然存在,反映在布局上就是自动填满除去浮动内容以外的剩余空间。

如果 右边宽度 固定,左边 宽度 自适应,那 html  结构 该是 右边div 先写

方法三:

给两个 div 加上wrapper

wrapper 相对定位,左边 设置定宽a,右边 绝对定位,top、right都是0,left 是a

 

 

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!