2 zzzcsd zzzcsd 于 2016.04.20 20:24 提问

样式错位,不知什么原因?
 <!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个回答

perhapschen
perhapschen   2016.04.20 21:39
已采纳
 .strap>*{
    display: inline-block;
    vertical-align:top;/*加上这个*/
}
qq_34297387
qq_34297387   2016.04.20 21:06

应该是代码书写不规范导致

perhapschen
perhapschen   2016.04.20 21:38

.strap>{
display: inline-block;
vertical-align:top;/
加上这个*/
}

tangtang_fly
tangtang_fly   2016.04.22 18:28

_这样写代码是有问题的,.footer-narrow_wrapper,.footer-wide_wrapper,.footer-qrcode_wrapper中加float:left;当然,这样的样式最好table布局吧

tangtang_fly
tangtang_fly   2016.04.22 18:28

_这样写代码是有问题的,.footer-narrow_wrapper,.footer-wide_wrapper,.footer-qrcode_wrapper中加float:left;当然,这样的样式最好table布局吧

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!