参考weui的Panel结构

核心：定位，补充：对容器设置font-size：0，消除img下多出的3px，防止居中出现偏差。

<!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>Document</title>

    <style>

        .flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}

        .flex-col{-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}

        .flex-row{-webkit-box-orient:vertical;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}

        .flex-1{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}

        .flex-align-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;}

        .flex-pack-center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}

        .flex-pack-justify{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}

        body,html,ul,li,p{

            margin:0;padding:0;

        }

        img{

            display:block;

        }

        .box_appmsg{

            padding:15px;

            border:1px solid red;

        }

        .box_appmsg .box_hd{

            font-size:0;

            width: 60px;

            height: 60px;

            line-height: 60px;

            text-align: center;

            position: relative;

            border:1px solid black;

        }

        .box_appmsg .box_thumb{

            position: absolute;

            top: 0;

            bottom: 0;

            left: 0;

            right: 0;

            margin: auto;

            max-width: 100%;

            max-height: 100%;

        }

        .list-info{

            margin-left:.8em;

        }

    </style>

</head>

<body>

    <ul>

        <li class="flex flex-row flex-align-center box_appmsg">

            <div class="box_hd">

                <img class="box_thumb" src="http://c.hiphotos.baidu.com/image/pic/item/5366d0160924ab1835f8e0fd3cfae6cd7a890b09.jpg" alt="">

            </div>

            <div class="flex-1 list-info">

                <p>商品</p>

                <p>价格</p>

            </div>

        </li>

    </ul>

</body>

</html>

预览：

https://besswang.github.io/Panel/index.html

拓展：

还有一种居中的方案，不过是针对文字的居中。是文字内容，不是所有的标签；

核心思想：父级：text-align:center;  子级：vertical-align:middle;

<!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>Document</title>

    <style>

        .flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}

        .flex-col{-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}

        .flex-row{-webkit-box-orient:vertical;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}

        .flex-1{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}

        .flex-align-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;}

        .flex-pack-center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}

        .flex-pack-justify{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}

        body,html,ul,li,p{

            margin:0;padding:0;

        }

        img{

            display:block;

        }

        .box_appmsg{

            padding:15px;

            border:1px solid red;

        }

        .box_appmsg .box_hd{

            width: 60px;

            height: 60px;

            line-height: 60px;

            text-align: center;

            border:1px solid black;

        }

        .box_appmsg .box_thumb{

            max-width: 100%;

            max-height: 100%;

            vertical-align: middle;

        }

        .list-info{

            margin-left:.8em;

        }

    </style>

</head>

<body>

    <ul>

        <li class="flex flex-row flex-align-center box_appmsg">

            <div class="box_hd">

                2233

                <!-- <img class="box_thumb" src="http://c.hiphotos.baidu.com/image/pic/item/5366d0160924ab1835f8e0fd3cfae6cd7a890b09.jpg" alt=""> -->

            </div>

            <div class="flex-1 list-info">

                <p>商品</p>

                <p>价格</p>

            </div>

        </li>

    </ul>

</body>

</html>

Panel结构的更多相关文章

  1. Lesson5——Pandas Panel三维数据结构

    pandas目录 1 简介 自 Pandas 0.25 版本后, Panel 结构已经被废弃. pd.__version__ #查看pandas版本 #'1.2.4' #或者 pd.show_vers ...

  2. Bootstrap3 入门实战

    因为公司选择了使用BootStrap3作为项目的前台展示框架,所以花了半天时间来学习Bootstrap, 如果你是第一次听说,或者说以前听说过,但没有使用过这个框架的话,希望这篇入门实战能够让你快速掌 ...

  3. C++： 基于四叉树数据结构的自适应网格（初探）

    C++: 基于四叉树数据结构的自适应网格 二叉树是一种典型的非线性存储数据结构,查找效率可以达到\(O(log_2N)\),同样,这类树状结构存在许多种变体,详细参考邓俊辉老师的<数据结构C++ ...

  4. 轻量级富文本编辑器wangEditor源码结构介绍

    1. 引言 wangEditor——一款轻量级html富文本编辑器(开源软件) 网站:http://www.wangeditor.com/ demo演示:http://www.wangeditor.c ...

  5. NGUI创建Camera参数为Simple 2D的UI UI对象的结构UI Root(2D)

    NGUI创建Camera参数为Simple 2D的UI UI对象的结构UI Root(2D) 使用NGUI创建的Camera参数为Simple 2D的UI,会在游戏的场景中生成1个名为UI Root( ...

  6. ExtJS MVC结构

    概述 大型的应用在开发和运维上都存在着困难.应用功能的调整和开发人员的调动都会影响对项目的掌控.ExtJS4带来了一种新的应用结构.这种结构不止用于组织代码,也能有效的减少必要的代码量. 这次ExtJ ...

  7. 深入浅出ExtJS 第五章 树形结构

    5.1 TreePanel的基本使用 //树是一种非常典型的数据结构; 5.1.1 创建一棵树 //树控件有Ext.tree.TreePanel类定义,控件的名称为TreePanel;TreePane ...

  8. 无废话网页重构系列——（6）HTML主干结构：站点(site)、页面(page)

    本文作者:大象本文地址:http://www.cnblogs.com/daxiang/p/4653546.html 在分析和切出设计稿,以及部署项目目录文件后,开始写HTML Demo. 首先,弄出H ...

  9. Ext.tree.Panel Extjs 在表格中添加树结构，并实现节点移动功能

    最近在用Extjs 做后台管理系统,真的非常好用.总结的东西分享一下. 先展示一下效果图 好了,开始吧! 首先说一下我的创建结构: 一.构造内容 这个函数中包括store的创建,treePanel的创 ...

随机推荐

  1. jQuery实现一个淡入淡出下拉菜单 非常简易

    前段时间我一直在向大家推荐CSS3和HTML5的东西,尽管看上去很炫,但也有不少网友抱怨兼容性问题,所以今天开始我也会陆续向大家介绍一些兼容性较好的jQuery插件.今天先分享一款利用jQuery实现 ...

  2. Java-Tomcat for Mac配置

    1.eclipse version: Eclipse Java EE IDE for Web Developers. Version: Oxygen.1 Release (4.7.1) Build i ...

  3. 使用w查看系统负载 vmstat命令 top命令 sar命令 nload命令

    w/uptime 查看系统负载 w查看系统负载,uptime跟w一样. [root@centos7 ~]# w 22:34:10 up 6 days, 23:10,  4 users,  load a ...

  4. LoadRunner 使用介绍

    功能介绍 安装流程 LoadRunner是一款测试系统行为和性能的负债测试工具,通过模拟上千万用户实施并发复杂以实时性能监控的方式来确认和查找问题.它是一款付费商业软件,开发商为HP,个人开发者可以使 ...

  5. Android Material Design控件学习（三）——使用TextInputLayout实现酷市场登录效果

    前言 前两次,我们学习了 Android Material Design控件学习(一)--TabLayout的用法 Android Material Design控件学习(二)--Navigation ...

  6. js粘贴事件paste简单解析及遇到的坑

    在用户执行粘贴操作的时候,js能够获得剪切板的内容,本文讨论一下这个问题. 目前只有Chrome支持获取剪切板中的图片数据.还好需要这个功能的产品目前只支持Chrome和Safari,一些Chrome ...

  7. ambari hdp 集成 impala

    1.下载ambari-impala-service VERSION=`hdp-select status hadoop-client | sed 's/hadoop-client - \([0-9]\ ...

  8. git链接github仓库

    配置Git 我们先在电脑硬盘里找一块地方存放本地仓库,比如我们把本地仓库建立在C:\MyRepository\1ke_test文件夹下 进入1ke_test文件夹 鼠标右键操作如下步骤: 1)在本地仓 ...

  9. oop思维意识，类 模块命名空间，类扩展之继承 、组合、mixin三种模式

    python的书都是讲怎么创建类怎么实例化对象,一般会用使用了,但还不具备这种编程意识.这是从python学习手册第四版节选出来的,书中说oop不仅是一种技术,更是一种经验.学习大神的看法,为什么需要 ...

  10. 7 -- Spring的基本用法 -- 6... Spring 3.0 提供的Java配置管理

    7.6 Spring 3.0 提供的Java配置管理 Spring 允许使用Java类进行配置管理,可以不使用XML来管理Bean,以及Bean之间的依赖关系. Interface :Person p ...