zoukankan      html  css  js  c++  java
  • 如何实现两列等高效果?

    先看下面的效果图:

    难点:

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

    解决方案:

    利用 display:tabledisplay: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>
  • 相关阅读:
    fopen flock fclose 文件用法
    thinkphp并发 阻塞模式与非阻塞模式
    thinkphp3.2 控制器导入模型
    thinkphp3.2 session时间周期无效
    UWP滑动后退
    旺信UWP公测邀请
    旺信UWP倒计时
    UWP应用开发系列视频教程简介
    新浪微博UWP UI意见征求
    淘宝UWP--自定义图片缓存
  • 原文地址:https://www.cnblogs.com/sese/p/7169705.html
Copyright © 2011-2022 走看看