位置：广州松河 > 技术支持 > padding和margin负值实现 - 等高布局，侧边栏等高布局方法_CSS学习

padding和margin负值实现 - 等高布局，侧边栏等高布局方法_CSS学习

来源：网络整理时间：2023/3/4 1:03:44 共 3638 浏览

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

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

如上图，两侧等高布局，就是使用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写了太多！

版权说明：
本网站凡注明“广州松河原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：CSS 图片水平垂直全部居中（图片尺寸小于块级父元素）_CSS学习 | ·下一条：纯CSS图形 - padding圆形/同心圆_CSS学习