移动端list布局，左边固定，右边自适应

最新推荐文章于 2021-05-26 03:53:38 发布

bangxionger9224

最新推荐文章于 2021-05-26 03:53:38 发布

阅读量266

点赞数

原文链接：http://www.cnblogs.com/theWayToAce/p/7404310.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>测试</title>
    <link rel="stylesheet" href="css/base.css">
    <style>
        .item-order-list {
            font-size: 0;
            background: transparent !important;
        }

        .item-order-list li {
            margin-bottom: 10px;
            background: #fff;
        }

        .item-order-list .item-order-header {
            border-bottom: 1px solid #ccc;
            color: #000;
            font-size: 0;
            box-sizing: border-box;
            height: 1rem;
            line-height: 1
        }

        .item-order-list .item-order-header > a {
            font-size: .42rem;
            line-height: 1rem;
        }

        .item-order-list .item-order-header a i {
            margin-right: .1rem;
            margin-left: .2rem
        }

        .item-order-list .item-order-header a i.icon-arrow-right {
            position: relative;
            top: .2rem;
            left: -.3rem;
            font-size: .8rem;
            color: #999;
        }

        .item-order-list .item-order-header span {
            float: right;
            margin-top: .32rem;
            margin-right: .2rem;
            color: #ed5564;
            font-size: .42rem
        }

        .item-order-content {
            position: relative;
            height: 2.6rem;
            border-bottom: 1px solid #ccc;
            font-size: 0
        }

        .item-order-content > a {
            display: inline-block;
            width: 100%;
            height: 100%
        }

        .item-order-content .img-area {
            position: absolute;
            top: .2rem;
            left: .2rem;
            display: table;
            width: 2.2rem;
            height: 2.2rem;
            border: 1px solid #ccc;
            box-sizing: border-box;
        }

        .item-order-content .img-area div {
            padding: .1rem;
            height: 2.2rem;
            display: table-cell;
            vertical-align: middle;
            box-sizing: border-box;
        }

        .item-order-content .img-area img {
            width: 100%;
        }

        .item-order-content .text-area {
            margin-left: 2.6rem;
            margin-right: 2.8rem;
            padding: .2rem;
            color: #333;
            font-size: .42rem;
        }

        .item-order-content .sub-area {
            position: absolute;
            top: .2rem;
            right: .2rem;
            width: 2.4rem;
            text-align: right
        }

        .item-order-content .sub-area span {
            display: block;
            color: #000;
            font-size: .42rem;
        }

        .item-order-content .sub-area em {
            color: #999;
            font-size: .4rem
        }

        .item-order-foot {
            padding: .2rem 0;
            border-bottom: 1px solid #ccc
        }

        .item-order-foot p {
            padding-right: .2rem;
            text-align: right;
            font-size: .42rem
        }

        .item-order-foot p em {
            font-size: .5rem
        }

        .item-order-foot p span {
            color: #999;
            font-size: .42rem
        }
    </style>
</head>
<body>
<div class="wrapper">
    <div class="item-order-list">
        <ul>
            <li>
                <div class="item-order-header">
                    <a href="store.html">
                        <i class="iconfont icon-shop"></i>小尤的店铺<i class="iconfont icon-arrow-right"></i>
                    </a>
                    <span>待发货</span>
                </div>
                <div class="item-order-content">
                    <a href="order-detail.html">
                        <div class="img-area">
                            <div><img src="images/1.png" alt="?"></div>
                        </div>
                        <div class="text-area"><p class="ellipsis-3">尽享休闲美味时刻甜橙</p></div>
                        <div class="sub-area">
                            <span>￥100.00</span>
                            <em>x1</em>
                        </div>
                    </a>
                </div>
                <div class="item-order-foot">
                    <p>共一件商品，合计:<em>￥100.00</em><span>(含运费￥0.00)</span></p>
                </div>
            </li>
            <li>
                <div class="item-order-header">
                    <a href="store.html">
                        <i class="iconfont icon-shop"></i>小尤的店铺<i class="iconfont icon-arrow-right"></i>
                    </a>
                    <span>待发货</span>
                </div>
                <div class="item-order-content">
                    <a href="order-detail.html">
                        <div class="img-area">
                            <div><img src="images/2.png" alt="?"></div>
                        </div>
                        <div class="text-area"><p class="ellipsis-3">尽享休闲美味时刻甜橙</p></div>
                        <div class="sub-area">
                            <span>￥100.00</span>
                            <em>x1</em>
                        </div>
                    </a>
                </div>
                <div class="item-order-foot">
                    <p>共一件商品，合计:<em>￥100.00</em><span>(含运费￥0.00)</span></p>
                </div>
            </li>
        </ul>
    </div>
</div>
<script>
    var oHtml=document.getElementsByTagName("html")[0];
    var iWidth=document.documentElement.clientWidth;
    iWidth=iWidth>750?750:iWidth;
    oHtml.style.fontSize=iWidth/10+"px";
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>测试</title>
    <link rel="stylesheet" href="css/base.css">
    <style>
        .flex ul {
            padding-left: .24rem;
            background: #fff;
            border-top: 1px #e5e5e5 solid;
            border-bottom: 1px #e5e5e5 solid;
            font-size: 0
        }

        .flex li {
            display: flex;
            width: 100%;
            border-bottom: 1px #e5e5e5 solid
        }

        .flex li:last-child {
            border-bottom: none
        }

        .flex .left, .flex .right {
            padding: .4rem 0;
            height: 1.4rem;
            box-sizing: border-box
        }

        .flex .left {
            flex: 0 0 1.95rem
        }

        .flex .right {
            flex: 1
        }

        .flex .left .avatar, .flex .left .text {
            display: inline-block;
            width: .98rem;
        }

        .flex .left .text span {
            display: inline-block;
            font-size: .3rem;
            color: #888
        }

        .flex .left .avatar,
        .flex .left .text {
            vertical-align: middle;
        }

        .flex .left .avatar {
            width: .6rem;
            height: .6rem;
            text-align: center;
            overflow: hidden;
            border-radius: 100%
        }

        .flex .left .avatar img {
            height: 100%;
        }

        .flex .right .info p {
            font-size: .32rem;
            color: #444
        }

        .flex .right .info em {
            font-size: .28rem;
            color: #666
        }
    </style>
</head>
<body>
<div class="wrapper">
    <div class="content flex">
        <ul>
            <li>
                <div class="left">
                    <div class="text">
                        <span>周五</span>
                        <span>8-14</span>
                    </div>
                    <div class="avatar">
                        <img src="images/1.png">
                    </div>
                </div>
                <div class="right">
                    <div class="info">
                        <p>100.00</p>
                        <em>提现-2小时内到账</em>
                    </div>
                </div>
            </li>
            <li>
                <div class="left">
                    <div class="text">
                        <span>周五</span>
                        <span>8-14</span>
                    </div>
                    <div class="avatar">
                        <img src="images/2.png">
                    </div>
                </div>
                <div class="right">
                    <div class="info">
                        <p>100.00</p>
                        <em>提现-2小时内到账</em>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <script>
        var oHtml = document.getElementsByTagName("html")[0];
        var iWidth = document.documentElement.clientWidth;
        iWidth = iWidth > 750 ? 750 : iWidth;
        oHtml.style.fontSize = iWidth / 7.5 + "px";
    </script>
</body>
</html>