zzzcsd 2016-04-20 12:24 采纳率: 0%
浏览 1544
已采纳

样式错位，不知什么原因？

 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    .strap {
        font-size: 0;
    }

    .strap>* {
        display: inline-block;
    }

    .footer-content {
        height: 254px;
    }

    .footer-narrow_wrapper {
        width: 112px;
        height: 253px;
    }

    .footer-wide_wrapper {
        width: 357px;
        height: 253px;
    }

    .footer-qrcode_wrapper {
        width: 232px;
        height: 253px;
    }

    .footer-square {
        width: 110px;
        height: 110px;
        line-height: 110px;
        border: 1px solid black;
        font-size: 13px;
        color: rgb(128, 128, 128);
        text-align: center;
    }

    .footer-rectangle {
        width: 355px;
        height: 107px;
        border: 1px solid black;
        line-height: 110px;
        text-align: center;
        font-size: 18px;
        color: rgb(128, 128, 128);
    }

    .footer-qrcode {
        width: 230px;
        height: 230px;
        border: 1px solid black;
        font-size: 12px;
        color: rgb(51, 51, 51);
    }
    </style>
</head>

<body>
    <div class="footer-content content strap">
        <div class="footer-narrow_wrapper">
            <div class="footer-square">关于我们</div>
            <div class="footer-square">服务条款</div>
        </div>
        <div class="footer-narrow_wrapper">
            <div class="footer-square">隐私政策</div>
            <div class="footer-square">帮助中心</div>
        </div>
        <div class="footer-wide_wrapper">
            <div class="footer-rectangle">4000-987-805</div>
            <div class="footer-rectangle">help@renrenma.com</div>
        </div>
        <div class="footer-wide_wrapper">
            <div class="footer-rectangle">3041507598</div>
            <div class="footer-rectangle">@人人码官方微博</div>
        </div>
        <div class="footer-qrcode_wrapper">
            <div class="footer-qrcode"></div>
        </div>
    </div>
</body>

</html>

元素的顶部不能对齐，搞不清楚是什么原因，谁能讲解下
就

  • 写回答

5条回答 默认 最新

  • cocotsau 2016-04-20 13:39
    关注
     .strap>*{
    display: inline-block;
    vertical-align:top;/*加上这个*/
}
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(4条)

报告相同问题？