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

编程问答

如何实现两列等高效果？

發布時間：2025/3/17 编程问答 32 豆豆

生活随笔收集整理的這篇文章主要介紹了如何实现两列等高效果？小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

先看下面的效果圖：

難點：

里面內容不確定，不能定高的同時要讓左右兩個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>

總結

以上是生活随笔為你收集整理的如何实现两列等高效果？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。