H5页面左图右边文字如何布局

时间:2024-11-24 14:33:44
H5页面左图右边文字如何布局H5页面左图右边文字如何布局
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品</title>
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no" name="format-detection">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>
    <style type="text/css">
        *{margin: 0; padding: 0;}
        .int_goods a{display: block;height: 3.467rem;background: #fff;padding: 0.800rem;display: -moz-box;display: -webkit-box;display: box; text-decoration: none;border-bottom: 1px solid #ddd;}
        .left_logo{width: 3.467rem;height: 3.467rem;border: 1px solid #F0F0F0;position: absolute;overflow: hidden;}
        .left_logo img{width: 100%;position: relative;top: 50%;transform:translateY(-50%);-ms-transform:translateY(-50%);-moz-transform:translateY(-50%);-webkit-transform:translateY(-50%);-o-transform:translateY(-50%);}
        .right_des{height: 3.467rem; margin-left: 4.267rem;box-flex: 1;-webkit-box-flex: 1;background: #fff url(http://static.17shihui.com/pageapp/images/serve/jiao.png) no-repeat right center;background-size: 0.375rem 0.625rem;}
        .right_des span,.right_des b{display: block;width: 12.347rem;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
        .right_des span{font-size: 0.875rem;color: #2B3139;padding-top: 0.640rem;}
        .right_des b{font-size: 0.750rem;color: #79889F;padding-top: 0.3rem;}
    </style>

</head>
<body>
    <div class="int_goods">
        <a href="">
            <p class="left_logo"><img src="http://static.17shihui.com/pageapp/images/serve/3.jpg"></p>
            <p class="right_des">
                <span>某某某某某某某某某科技有限公司</span>
                <b> 纯天然植物绿色产品</b>
            </p>
        </a>
    </div>
</body>
</html>