摘要:实现列布局,左侧宽度固定,右侧自适应实现一根据定位,利用浮动或绝对定位,使左侧的块元素脱离常规文档流可以与右边块元素并列利用浮动利用绝对定位块级元素,默认自动填充父元素宽度,霸占一行当前右侧块元素宽度父元素宽度设置为左侧块元素的宽度。
HTML实现2列布局,左侧宽度固定,右侧自适应
实现一:
div1div2
1)设置margin-left之前
2)设置margin-left之后
实现二:
div1div2
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/117024.html
摘要:实现列布局,左侧宽度固定,右侧自适应实现一根据定位,利用浮动或绝对定位,使左侧的块元素脱离常规文档流可以与右边块元素并列利用浮动利用绝对定位块级元素,默认自动填充父元素宽度,霸占一行当前右侧块元素宽度父元素宽度设置为左侧块元素的宽度。 HTML实现2列布局,左侧宽度固定,右侧自适应 实现一: body, html{padding:0; margin:0;} // 根据...
摘要:不管是左是右,反正就是一边宽度固定,一边宽度自适应。博客园的很多主题也是这样设计的,我的博客园博客也是右侧固定宽度,左侧自适应屏幕的布局方式。与配合使用首先我们调整一下结构自适应区固定宽度区代码这样实现,的实际宽度就是屏幕宽度。 我在前面有一篇文章《CSS基础篇--可扩展性的页面布局》中介绍了如下三种布局方式:1.左右结构,左边100%;右边宽度固定2.左右结构,左边固定,右边100%...
1.常见的两列布局 1.1左边固定,右边自适应,左边宽度已知,右边默认占满整行,使用left 左浮动,右边不浮动,设置margin-left:左侧宽度 style .box{ overflow: hidden; height: 500px; background-color: bisque; .box .box-left { margin-left: 10px; ...
摘要:总结一下左边固定,右边自适应的两栏布局的七种方法。基本的样式是,两个相距左侧宽基本的样式是,两个盒子相距左侧盒子宽,右侧盒子宽度自适应。没有清除浮动的方法,若左侧盒子高于右侧盒子,就会超出父容器的高度。 总结一下左边固定,右边自适应的两栏布局的七种方法。其中有老生常谈的float方法,BFC方法,也有CSS3的flex布局与grid布局。并非所有的布局都会在开发中使用,但是其中也会涉及...
阅读 1840·2023-04-26 02:46
阅读 1981·2021-11-25 09:43
阅读 1110·2021-09-29 09:35
阅读 2051·2019-08-30 15:56
阅读 3406·2019-08-30 15:54
阅读 2613·2019-08-29 16:35
阅读 3075·2019-08-29 15:25
阅读 3262·2019-08-29 14:01