资讯专栏INFORMATION COLUMN

HTML实现2列布局,左侧宽度固定,右侧自适应

Jochen / 3211人阅读

摘要:实现列布局,左侧宽度固定,右侧自适应实现一根据定位,利用浮动或绝对定位,使左侧的块元素脱离常规文档流可以与右边块元素并列利用浮动利用绝对定位块级元素,默认自动填充父元素宽度,霸占一行当前右侧块元素宽度父元素宽度设置为左侧块元素的宽度。

HTML实现2列布局,左侧宽度固定,右侧自适应

实现一:



    
div1
div2

1)设置margin-left之前

2)设置margin-left之后

实现二:



    
div1
div2

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/117024.html

相关文章

  • HTML实现2布局左侧宽度固定右侧适应

    摘要:实现列布局,左侧宽度固定,右侧自适应实现一根据定位,利用浮动或绝对定位,使左侧的块元素脱离常规文档流可以与右边块元素并列利用浮动利用绝对定位块级元素,默认自动填充父元素宽度,霸占一行当前右侧块元素宽度父元素宽度设置为左侧块元素的宽度。 HTML实现2列布局,左侧宽度固定,右侧自适应 实现一: body, html{padding:0; margin:0;} // 根据...

    happyfish 评论0 收藏0
  • CSS基础篇--页面实现布局,一固定宽度,一宽度适应方法

    摘要:不管是左是右,反正就是一边宽度固定,一边宽度自适应。博客园的很多主题也是这样设计的,我的博客园博客也是右侧固定宽度,左侧自适应屏幕的布局方式。与配合使用首先我们调整一下结构自适应区固定宽度区代码这样实现,的实际宽度就是屏幕宽度。 我在前面有一篇文章《CSS基础篇--可扩展性的页面布局》中介绍了如下三种布局方式:1.左右结构,左边100%;右边宽度固定2.左右结构,左边固定,右边100%...

    RichardXG 评论0 收藏0
  • css常见的各种布局上(两布局

      常见的布局上(两列布局)     1.常见的两列布局       1.1左边固定,右边自适应,左边宽度已知,右边默认占满整行,使用left 左浮动,右边不浮动,设置margin-left:左侧宽度 .box{ overflow: hidden; height: 500px; background-col...

    番茄西红柿 评论0 收藏0
  • css常见的各种布局上(两布局

    1.常见的两列布局 1.1左边固定,右边自适应,左边宽度已知,右边默认占满整行,使用left 左浮动,右边不浮动,设置margin-left:左侧宽度 style .box{ overflow: hidden; height: 500px; background-color: bisque; .box .box-left { margin-left: 10px; ...

    DTeam 评论0 收藏0
  • 七种实现左侧固定右侧适应两栏布局的方法

    摘要:总结一下左边固定,右边自适应的两栏布局的七种方法。基本的样式是,两个相距左侧宽基本的样式是,两个盒子相距左侧盒子宽,右侧盒子宽度自适应。没有清除浮动的方法,若左侧盒子高于右侧盒子,就会超出父容器的高度。 总结一下左边固定,右边自适应的两栏布局的七种方法。其中有老生常谈的float方法,BFC方法,也有CSS3的flex布局与grid布局。并非所有的布局都会在开发中使用,但是其中也会涉及...

    luffyZh 评论0 收藏0

发表评论

0条评论

Jochen

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<