首页 > 代码库 > 如何实现两列等高效果？

如何实现两列等高效果？

2024-10-25 15:17:02   211人阅读

先看下面的效果图：

技术分享

 

难点：

里面内容不确定，不能定高的同时要让左右两个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>

 

如何实现两列等高效果？


联系
我们