如何实现两列等高效果？
生活随笔
收集整理的這篇文章主要介紹了
如何实现两列等高效果？
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
先看下面的效果圖：
?
難點：
里面內容不確定，不能定高的同時要讓左右兩個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>?
總結
以上是生活随笔為你收集整理的如何实现两列等高效果？的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Linux基本命令解析（1）
- 下一篇： CSS-垂直|水平居中问题的解决方法总结