等高布局


一、padding&margin的叠加

原理:,使用足够高的padding-bottom  来显示高度的落差部分,设置反向的margin-bottom 来抵消padding给其他元素带来的影响,给左中右设置overflow:hidden隐藏溢出

页面效果,高度随内容而变化


css代码


html代码

如果需要在单列添加一个底边框,需要在第一列里面添加一个空标签,伪装成边框,定位到相应位置,以父元素为定位元素 

     
二、嵌套式等高

使用三个嵌套的元素,通过定位偏移来产生3个背景区域, 在最内层容器中放置3列,通过margin-left 负值显示在背景颜色的区域,页面高度随bg3中的元素高度而变化

html代码


css代码

三个嵌套元素叠加在一起,通过定位偏移将上面两层向右偏移指定数值,bg2和bg3设置的宽度百分百,也就是父级bg1的宽度,偏移后右边部分会发生溢出,在bg1使用overflow:hidden把溢出部分隐藏,bg3中的三个元素向左偏移,使其向左排列成一行,使用margin负值偏移到指定位置,清除bg3浮动,解决高度塌陷,bg3中的元素的高度就是bg3的高度,bg3的高度就是bg2,bg1的高度,bg3中的内容决定页面的高度

三、边框仿背景

          利用边框宽度作为左右两侧的内容区,  浮动之后使用margin值偏移到相应位置


html代码


css代码
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,807评论 1 92
  • relative:生成相对定位的元素,通过top,bottom,left,right的位置相对于其正常位置进行定位...
    zx9426阅读 966评论 0 2
  • 1.需求:宽度固定,添加内容多列元素高度相同 2.使用技术 浮动:左右元素全部向左浮动 paddin...
    慕名66阅读 416评论 0 0
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,741评论 1 45
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,337评论 0 11