padding和margin负值实现 - 等高布局,侧边栏等高布局方法

老白 6年前 2278浏览 0评论

等高布局相关《position实现等高布局》 实现的方法主要是基于position:absolute;top:0;bottom:0来实现等高布局!

而本文要使用的方法主要是padding和margin配合等高布局,让多栏目等高!

padding和margin登高布局.png

如上图,两侧等高布局,就是使用padding配合margin实现的!

<style>
 .box{overflow: hidden;resize: vertical;}//resize可以去除
 .orange{float: left; background-color: orange;}
 .green{float: left; background-color: green;}
 .orange,.green{margin-bottom: -500px;padding-bottom: 500px; width: 200px;color: #fff;}
</style>
<div class="box">
 <div class="orange">
  orange<br>
  orange<br>
  orange<br>
  orange<br>
  orange<br>
  orange<br>
  orange<br>
  orange<br>
  orange<br>
  orange<br>
  orange<br>
  orange<br>
 </div>
 <div class="green">
  green<br>
  green<br>
  green<br>
  green<br>
 </div>
</div>

这种实现方法还是来自于大神张鑫旭的视频课程,关于等高布局使用padding,又学了一种方法,这也是今天主要学习padding的一些收获总结!

最近关于padding写了太多!