H5页面左图右边文字如何布局
<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>
H5页面左图右边文字如何布局的更多相关文章
- H5页面长按导致app崩溃问题解决
每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 最近用H5页面做了个安卓的项目,但是在H5页面中长按文字内容,会导致APP崩溃掉... ...
- 安卓下设置系统字体大小影响H5页面布局
问题描述: 调整好的h5页面,放在安卓app内嵌页面后布局正常,后来用户调整系统里面字体大小,后内嵌H5布局乱掉 问题分析: 因为用户调整了系统字体的大小,修改了根节点和body节点的font-siz ...
- vuejs开发H5页面总结
最近参与了APP内嵌H5页面的开发,这次使用vuejs替代了jQuery,仅仅把vuejs当做一个库来使用,效率提高之外代码可读性更强,在此分享一下自己的一些开发中总结的经验. 关于布局方案 当拿到设 ...
- 【H5】344- 微信 H5 页面兼容性解决方案
点击上方"前端自习课"关注,学习起来~ 最近给公司微信公众号,写了微信h5业务页面,总结分享一下前端开发过程中的几个兼容性坑,项目直接拿的公司页面,所以下文涉及图片都模糊处理了. ...
- 微信H5页面前端开发，大多数人都会遇到的几个兼容性坑
最近给公司微信公众号,写了微信h5业务页面,总结分享一下前端开发过程中的几个兼容性坑,项目直接拿的公司页面,所以下文涉及图片都模糊处理了. 1.ios端兼容input光标高度 问题详情描述:input ...
- 移动端H5页面高清多屏适配方案
背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...
- [转]:移动端H5页面高清多屏适配方案
原文链接:http://www.tuicool.com/articles/YJviea 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们 ...
- H5页面测试实战总结
如何判断是否是H5页面: 基本上只要对那个view长按,然后看是不是有反应,比如手机震动(Android).或者出现文字选择粘贴(Android/iOS),那么就是WebView! 横屏竖屏相互切换, ...
- 教你判断一个APP页面是原生的还是H5页面 。(还没看)
来源:https://www.25xt.com/appdesign/11851.html 刚好是周末,无意之间学堂君在收集相关资料的时候,发现有部分童鞋在问<如何判断一个APP页面是不是H5页面 ...
随机推荐
- HTTPS与强制门户
强制门户 http://www.whatis.com.cn/word_5182.htm 强制网络门户(captive portal)是一个Web页面,它是使用公共访问网络的用户在被授予访问权限前必须访 ...
- JSON风格指南-真经
简介 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集. JSON采用完全独立于语言的文本格式,但是也使用了类似于C语 ...
- ASP.NET MVC中，怎么使用jquery/ajaxForm上传文件
ajaxForm插件最好选择:jquery forms plugin. 以下为示例: Ajax.BeginForm @using (Ajax.BeginForm("YourAction&qu ...
- C 语言中的指针和内存泄漏
引言对于任何使用 C 语言的人,如果问他们 C 语言的最大烦恼是什么,其中许多人可能会回答说是指针和内存泄漏.这些的确是消耗了开发人员大多数调试时间的事项.指针和内存泄漏对某些开发人员来说似乎令人畏惧 ...
- ajax是什么
1.ajax是什么? ajax: asynchronous javascript and xml: 异步的javascript和xml. ajax是一种用来改善用户体验的技术,其本质是利用浏览器内置的 ...
- 白话LINQ系列1---什么是LINQ？
一.本系列目标 1.理解LINQ: 2.能写得复杂的LINQ语句(比如:动态查询): 3.理解表达式树及相关概念: 4.熟练运用LINQ写出优美的代码(希望一起努力,最终达到): 二.LINQ为何物? ...
- Plextor 浦科特M7VC性能
浦科特一出TLC的SSD,立刻就受到了人们的关注,网上铺天盖地的评测.看了评测感觉不错,于是买了一块来用. 自己测试,似乎和网上的结果差异挺大的. 这是我自己测试的结果.(测试平台为:I7-5820K ...
- iPad和iPhone开发区别
原文:http://mobile.51cto.com/iphone-273895.htm iPad与iPhone 开发区别详解是本文要介绍的内容,先来看看他们的区别. 1.首先我们先从官方发布的SDK ...
- android第三方登陆
实现QQ.微信.新浪微博和百度第三方登录(Android Studio) 前言: 对于大多数的APP都有第三方登录这个功能,自己也做过几次,最近又有一个新项目用到了第三方登录,所以特意总结了一下关于第 ...
- SQL学习指南 ——笔记
前言:每章的练习题很实用,跟着练了一遍.答案附录有 1.流行的商业级关系数据库: