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
  • 相关阅读:
    python 01
    Node.js 基础库
    Node 编程规范
    Linux_异常_08_本机无法访问虚拟机web等工程
    inux_异常_07_ftp查看不到文件列表
    Linux_异常_04_ftp: command not found...
    Linux_异常_03_Failed to restart iptables.service: Unit not found.
    Linux_异常_02_WinSCP上传文件时显示Permission denied
    Linux_异常_01_CentOS7无法ping 百度
    Linux_配置_02_配置dns
  • 原文地址:https://www.cnblogs.com/xiaoleidiv/p/5477936.html
Copyright © 2011-2022 走看看