Panel结构
参考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结构的更多相关文章
- Lesson5——Pandas Panel三维数据结构
pandas目录 1 简介 自 Pandas 0.25 版本后, Panel 结构已经被废弃. pd.__version__ #查看pandas版本 #'1.2.4' #或者 pd.show_vers ...
- Bootstrap3 入门实战
因为公司选择了使用BootStrap3作为项目的前台展示框架,所以花了半天时间来学习Bootstrap, 如果你是第一次听说,或者说以前听说过,但没有使用过这个框架的话,希望这篇入门实战能够让你快速掌 ...
- C++： 基于四叉树数据结构的自适应网格（初探）
C++: 基于四叉树数据结构的自适应网格 二叉树是一种典型的非线性存储数据结构,查找效率可以达到\(O(log_2N)\),同样,这类树状结构存在许多种变体,详细参考邓俊辉老师的<数据结构C++ ...
- 轻量级富文本编辑器wangEditor源码结构介绍
1. 引言 wangEditor——一款轻量级html富文本编辑器(开源软件) 网站:http://www.wangeditor.com/ demo演示:http://www.wangeditor.c ...
- 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( ...
- ExtJS MVC结构
概述 大型的应用在开发和运维上都存在着困难.应用功能的调整和开发人员的调动都会影响对项目的掌控.ExtJS4带来了一种新的应用结构.这种结构不止用于组织代码,也能有效的减少必要的代码量. 这次ExtJ ...
- 深入浅出ExtJS 第五章 树形结构
5.1 TreePanel的基本使用 //树是一种非常典型的数据结构; 5.1.1 创建一棵树 //树控件有Ext.tree.TreePanel类定义,控件的名称为TreePanel;TreePane ...
- 无废话网页重构系列——（6）HTML主干结构：站点(site)、页面(page)
本文作者:大象本文地址:http://www.cnblogs.com/daxiang/p/4653546.html 在分析和切出设计稿,以及部署项目目录文件后,开始写HTML Demo. 首先,弄出H ...
- Ext.tree.Panel Extjs 在表格中添加树结构，并实现节点移动功能
最近在用Extjs 做后台管理系统,真的非常好用.总结的东西分享一下. 先展示一下效果图 好了,开始吧! 首先说一下我的创建结构: 一.构造内容 这个函数中包括store的创建,treePanel的创 ...
随机推荐
- 设计模式1-单例模式(Singletion)
单例模式(Singletion):保证一个类仅有一个实例,并提供一个访问该实例的全局访问点. 单例模式主要作用是保证唯一的实例,可以严格地控制客户端怎样访问该实例以及何时访问它.可以简单的理解为对唯一 ...
- excel做回归分析的应用【风控数据分析】
方法1 统计逻辑:统计一个loginname的所有去重的通讯录数C,统计这个Loginname对应的每个设备对应的通讯录c1,c2,c3…cn; X=(c1/c+c2/c+c3/c+….cn/ ...
- 为Hadoop集群选择合适的硬件配置
随着Apache Hadoop的起步,云客户的增多面临的首要问题就是如何为他们新的的Hadoop集群选择合适的硬件. 尽管Hadoop被设计为运行在行业标准的硬件上,提出一个理想的集群配置不想提供硬件 ...
- 近5年常考Java面试题及答案整理（一）
下列面试题都是在网上收集的,本人抱着学习的态度找了下参考答案,有不足的地方还请指正. 1.面向对象的特征有哪些方面? 抽象:将同类对象的共同特征提取出来构造类. 继承:基于基类创建新类. 封装:将数据 ...
- 【转】ZooKeeper学习第二期--Zookeeper命令操作
一.Zookeeper的四字命令 Zookeeper支持某些特定的四字命令字母与其的交互.他们大多数是查询命令,用来获取Zookeeper服务的当前状态及相关信息.用户在客户端可以通过telnet或n ...
- mysql中查看数据库的版本，什么版本
需求:查看当前使用的数据库是哪个版本的,什么版本 select version(); 查询结果: 备注:通过version()函数查询出来当前使用的数据库版本是5.5.57-log 文档创建时间:20 ...
- go和python互调
https://www.cnblogs.com/huangguifeng/p/8931837.html Python调用go编写的高性能模块 https://yq.aliyun.com/artic ...
- 阿里云被挖矿使用，导致cpu长期处于100%，ddgs进程，xWx3T进程,关于redis密码
1.使用top命令,查看到一个叫xWx3T的进程cpu占用99.8%,由于我的阿里云是单核的,所以最高只能100%. 把它用kill命令杀死后,过一会儿又启动了,又占用100%. 使用ps -ef可以 ...
- Eclipse------如何将项目通过maven编译并打包
1.右击项目>>>点击Debug As>>>点击 Maven install进行编译,编译成功后入图 2.右击项目>>>点击Debug As> ...
- Redis Cluster 简单安装配置
1 新建目录 “/app/redis”,输入命令 mkdir -p /app/redis 2 先安装ruby-2.3.1.tar.gz 3 测试ruby是否安装成功,输入命令:gem,如果显示以下信息 ...