zoukankan      html  css  js  c++  java
  • 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">
            <href="">
                <class="left_logo"><img src="http://static.17shihui.com/pageapp/images/serve/3.jpg"></p>
                <class="right_des">
                    <span>某某某某某某某某某科技有限公司</span>
                    <b> 纯天然植物绿色产品</b>
                </p>
            </a>
        </div>
    </body>
    </html>
    View Code
  • 相关阅读:
    如何计算两个日期之间相差天数
    解决并发问题的小技巧
    Linq实现下拉框绑定
    No DataType in DataTemplate in Windows Phone(二)
    使用TOAD操作oracle初步
    使用log4net记录server Log
    尘世一场烟火
    No DataType in DataTemplate in Windows Phone(—)
    MVC设置初始页时发生的无法找到资源的简单错误
    oracle 使用in的灵异事件
  • 原文地址:https://www.cnblogs.com/xiaoleidiv/p/5477936.html
Copyright © 2011-2022 走看看