当前位置：首页 > 编程资源 > 编程问答 >内容正文

编程问答

如何实现两列等高效果？

发布时间：2025/3/17 编程问答 50 豆豆

生活随笔收集整理的这篇文章主要介绍了如何实现两列等高效果？小编觉得挺不错的,现在分享给大家,帮大家做个参考.

先看下面的效果图：

难点：

里面内容不确定，不能定高的同时要让左右两个div的高度保持一致。

解决方案：

利用 display:table 和 display:table-cell。因为display:table之后对margin不敏感，所以如果要调整两者之间的间距，需要用到border-spacing。

具体代码：

<!DOCTYPE html> <html><head><meta charset="utf-8"><title>利用display:table实现两列等高</title><style type="text/css">.service-list-block{margin-top: 15px;width: 600px;}.service-list-block .service-item-wrap{padding: 0 15px;display: table;table-layout: fixed;width: 100%;box-sizing: border-box;border-spacing: 20px;}.service-list-block .service-item-wrap>li{display: table-cell;border: 1px solid #e6e6e6;} .service-item-detail{padding: 15px;} </style></head><body><h3>两列等高</h3><div class="service-list-block"><ul class="tc service-item-wrap"><li><div class="service-item"><div class="service-item-detail"><ol><li>免费注册机构账户</li><li>免费授权绑定公众号</li><li>免费拥有微官网搭建</li><li>免费使用基础工具</li><li>营销利器试用半个月</li></ol></div></div></li><li><div class="service-item"><div class="service-item-detail"><ol><li>机构微商城系统</li><li>营销利器插件包</li></ol></div></div></li></ul></div></body> </html>

总结

以上是生活随笔为你收集整理的如何实现两列等高效果？的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。