inline-block图文布局

最新推荐文章于 2025-07-05 20:23:59 发布
转载最新推荐文章于 2025-07-05 20:23:59 发布 · 111 阅读
0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/Dylanblogs/p/8575547.html
本文通过三个不同的示例展示了如何使用inline-block属性进行网页布局。包括使用span标签、img标签以及flex布局实现元素的水平排列，并保持垂直居中对齐。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>inline-block使用</title>
    <style>
        :not(input, textarea) {
            -webkit-user-select: none;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            -webkit-touch-callout: none;
            -webkit-text-size-adjust: none;
        }

        html,
        body,
        div,
        span,
        applet,
        object,
        iframe,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        p,
        blockquote,
        pre,
        a,
        abbr,
        acronym,
        address,
        big,
        cite,
        code,
        del,
        dfn,
        em,
        font,
        ins,
        kbd,
        q,
        s,
        samp,
        small,
        strike,
        strong,
        sub,
        sup,
        tt,
        var,
        dl,
        dt,
        dd,
        ol,
        ul,
        li,
        fieldset,
        form,
        label,
        legend,
        table,
        caption,
        tbody,
        tfoot,
        thead,
        tr,
        th,
        td {
            border: 0;
            font-family: "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", arial, Tahoma, SimSun, sans-serif;
            font-style: inherit;
            font-weight: inherit;
            margin: 0;
            outline: 0;
            padding: 0;
            vertical-align: baseline
        }

        html {
            font-size: 50px;
            height: 100%
        }

        .demo {
            margin: .3rem;
        }

        .demo .row {
            font-size: 0;
        }

        .demo .row span {
            display: inline-block;
            vertical-align: middle;
            height: .4rem;
        }

        .demo .ico {
            width: 0.4rem;
            background: url(http://static.58.com/lbg/personcenter/dist/images/shop@2x.png) no-repeat center;
            background-size: 100%;
            margin-right: 0.2rem;
        }

        .demo .company {
            font-size: 0.26rem;
            color: #333333;
            letter-spacing: 0;
            margin-right: 0.1rem;
        }

        .demo .arrow {
            height: .22rem !important;
            width: .22rem;
            background: url(http://static.58.com/lbg/personcenter/dist/images/shoparrow@3x.png) no-repeat top center;
            background-size: 100%;
        }

        .demo .calltime {
            font-size: 0.26rem;
            color: #333333;
            float: right;
        }

        .demo1 span,
        .demo1 img {
            vertical-align: middle;
            outline: .01rem solid red;
        }

        .demo1 {
            margin: .3rem;
        }

        .demo1 .row {
            font-size: 0;
            outline: .01rem solid green;
        }

        .demo1 .ico {
            height: .4rem;
            width: .4rem;
        }

        .demo1 .company {
            font-size: 0.26rem;
            color: #333333;
            margin-right: 0.1rem;
        }

        .demo1 .arrow {
            height: .22rem !important;
            width: .22rem;
        }

        .demo1 .calltime {
            font-size: 0.26rem;
            color: #333333;
            float: right;
        }

        .demo2 {
            margin: .3rem;
        }

        .demo2 .row {
            display: flex;
            align-items: center;
            font-size: 0;
            outline: .01rem solid green;
        }

        .demo2 img,
        .demo2 span {
            outline: .01rem solid red;
        }

        .demo2 .ico {
            height: .4rem;
            width: .4rem;
        }

        .demo2 .company {
            font-size: 0.26rem;
            color: #333333;
            margin-right: 0.1rem;
        }

        .demo2 .arrow {
            height: .22rem;
            width: .22rem;
        }

        .demo2 .calltime {
            font-size: 0.26rem;
            color: #333333;
        }

        .demo3 {
            margin: .3rem;
        }

        .demo3 .row {
            font-size: 0;
            padding:.2rem 0;
            background:#f3f3f3;
            margin-bottom:.2rem;
        }

        .demo3 .row .shop {
            font-size: 0.26rem;
            color: #333333;
            text-decoration: none;
        }

        .demo3 .row .shop::before {
            content: '';
            display: inline-block;
            vertical-align: -.1rem;
            width: .4rem;
            height: .4rem;
            background: url(http://static.58.com/lbg/personcenter/dist/images/shop@2x.png) no-repeat;
            background-position: top left;
            background-size: 100%;
            margin-right: .2rem;
        }

        .demo3 .row .shop::after {
            content: '';
            display: inline-block;
            vertical-align: middle;
            width: .22rem;
            height: .22rem;
            background: url(http://static.58.com/lbg/personcenter/dist/images/shoparrow@3x.png) no-repeat;
            background-position: top left;
            background-size: 100%;
            margin-left: .1rem;
        }

        .demo3 .row .calltime {
            float: right;
            font-size: 0.26rem;
            color: #333333;
        }
    </style>
</head>

<body>
    <div class="demo">
        <div class="row">
            <span class="ico"></span>
            <span class="company">该商家暂无店铺</span>
            <span class="arrow"></span>
            <span class="calltime">通话时长2分28秒</span>
        </div>
        <div class="row">
            <span class="ico"></span>
            <span class="company">该商家暂无店铺</span>
            <span class="arrow"></span>
            <span class="calltime">通话时长2分28秒</span>
        </div>
        <div class="row">
            <span class="ico"></span>
            <span class="company">该商家暂无店铺</span>
            <span class="arrow"></span>
            <span class="calltime">通话时长2分28秒</span>
        </div>
    </div>
    <div class="demo1">
        <div class="row">
            <img class="ico" src="http://static.58.com/lbg/personcenter/dist/images/shop@2x.png" alt="">
            <span class="company">该商家暂无店铺</span>
            <img class="arrow" src="http://static.58.com/lbg/personcenter/dist/images/shoparrow@3x.png" alt="">
            <span class="calltime">通话时长2分28秒</span>
        </div>
        <div class="row">
            <img class="ico" src="http://static.58.com/lbg/personcenter/dist/images/shop@2x.png" alt="">
            <span class="company">该商家暂无店铺</span>
            <img class="arrow" src="http://static.58.com/lbg/personcenter/dist/images/shoparrow@3x.png" alt="">
            <span class="calltime">通话时长2分28秒</span>
        </div>
        <div class="row">
            <img class="ico" src="http://static.58.com/lbg/personcenter/dist/images/shop@2x.png" alt="">
            <span class="company">该商家暂无店铺</span>
            <img class="arrow" src="http://static.58.com/lbg/personcenter/dist/images/shoparrow@3x.png" alt="">
            <span class="calltime">通话时长2分28秒</span>
        </div>
    </div>
    <div class="demo2">
        <div class="row">
            <img class="ico" src="http://static.58.com/lbg/personcenter/dist/images/shop@2x.png" alt="">
            <span class="company">该商家暂无店铺</span>
            <img class="arrow" src="http://static.58.com/lbg/personcenter/dist/images/shoparrow@3x.png" alt="">
            <span class="calltime">通话时长2分28秒</span>
        </div>
        <div class="row">
            <img class="ico" src="http://static.58.com/lbg/personcenter/dist/images/shop@2x.png" alt="">
            <span class="company">该商家暂无店铺</span>
            <img class="arrow" src="http://static.58.com/lbg/personcenter/dist/images/shoparrow@3x.png" alt="">
            <span class="calltime">通话时长2分28秒</span>
        </div>
        <div class="row">
            <img class="ico" src="http://static.58.com/lbg/personcenter/dist/images/shop@2x.png" alt="">
            <span class="company">该商家暂无店铺</span>
            <img class="arrow" src="http://static.58.com/lbg/personcenter/dist/images/shoparrow@3x.png" alt="">
            <span class="calltime">通话时长2分28秒</span>
        </div>
    </div>
    <div class="demo3">
        <div class="row">
            <a class="shop" href="http://m.58.com">该商家暂无店铺</a>
            <span class="calltime">通话时长2分28秒</span>
        </div>
        <div class="row">
            <a class="shop" href="http://m.58.com">该商家暂无店铺</a>
            <span class="calltime">通话时长2分28秒</span>
        </div>
    </div>
</body>

</html>
转载于:https://www.cnblogs.com/Dylanblogs/p/8575547.html