css布局左边固定右边自适应div左右排列⾼度⾃适应_css⼩技巧：如何实现多列⾼度不同
的div等⾼
⽹页布局中会⽤到多列div⾼度等⾼的情况，最简单的⽅法是设置为⼀固定⾼度，但是如果div内的内容不定的话不能做到⾃适应⾼度，今天⼩编就给⼤家分享下⼏种实现多列⾼度不同的div等⾼的⽅法。
实现多列⾼度不同的div等⾼
第⼀种：利⽤padding-bottom|margin-bottom正负值相抵；设置⽗容器设置超出隐藏(overflow:hidden)
这样⼦⽗容器的⾼度就还是它⾥⾯的列没有设定padding-bottom时的⾼度，当它⾥⾯的任 ⼀列⾼度增加了，则⽗容器的⾼度被撑到⾥⾯最⾼那列的⾼度，其他⽐这列矮的列会⽤它们的padding-bottom补偿这部分⾼度差。
#wrap { overflow: hidden; width: 1000px; margin: 10px auto; position: relative; } .box { float: left; width: 190px; padding-bottom: 820px; margin-bottom: -800px; }
第⼆种：定义⽗盒⼦为表格， 使⽤ table-cell
#wrap { overflow: hidden; width: 1000px; margin: 10px auto; display: table;} .box { width: 190px; display: table-cell;vertical-align: middle;}
第三种：使⽤css3盒模型display:box
不同的浏览器要做不同的兼容：⽬前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全⽀持，但可以使⽤它们的私有属性定义firefox(-moz)、opera(-0)、chrome/safari(-webkit)。
#wrap { display: -webkit-box; overflow: hidden; width: 1000px; margin: 10px auto; } .box { width: 190px; }

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。