移动端list布局，左边固定，右边自适应
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>测试</title>
<link rel="stylesheet" href="css/base.css">
<style>
.item-order-list {
font-size: 0;
background: transparent !important;
} .item-order-list li {
margin-bottom: 10px;
background: #fff;
} .item-order-list .item-order-header {
border-bottom: 1px solid #ccc;
color: #000;
font-size: 0;
box-sizing: border-box;
height: 1rem;
line-height: 1
} .item-order-list .item-order-header > a {
font-size: .42rem;
line-height: 1rem;
} .item-order-list .item-order-header a i {
margin-right: .1rem;
margin-left: .2rem
} .item-order-list .item-order-header a i.icon-arrow-right {
position: relative;
top: .2rem;
left: -.3rem;
font-size: .8rem;
color: #999;
} .item-order-list .item-order-header span {
float: right;
margin-top: .32rem;
margin-right: .2rem;
color: #ed5564;
font-size: .42rem
} .item-order-content {
position: relative;
height: 2.6rem;
border-bottom: 1px solid #ccc;
font-size: 0
} .item-order-content > a {
display: inline-block;
width: 100%;
height: 100%
} .item-order-content .img-area {
position: absolute;
top: .2rem;
left: .2rem;
display: table;
width: 2.2rem;
height: 2.2rem;
border: 1px solid #ccc;
box-sizing: border-box;
} .item-order-content .img-area div {
padding: .1rem;
height: 2.2rem;
display: table-cell;
vertical-align: middle;
box-sizing: border-box;
} .item-order-content .img-area img {
width: 100%;
} .item-order-content .text-area {
margin-left: 2.6rem;
margin-right: 2.8rem;
padding: .2rem;
color: #333;
font-size: .42rem;
} .item-order-content .sub-area {
position: absolute;
top: .2rem;
right: .2rem;
width: 2.4rem;
text-align: right
} .item-order-content .sub-area span {
display: block;
color: #000;
font-size: .42rem;
} .item-order-content .sub-area em {
color: #999;
font-size: .4rem
} .item-order-foot {
padding: .2rem 0;
border-bottom: 1px solid #ccc
} .item-order-foot p {
padding-right: .2rem;
text-align: right;
font-size: .42rem
} .item-order-foot p em {
font-size: .5rem
} .item-order-foot p span {
color: #999;
font-size: .42rem
}
</style>
</head>
<body>
<div class="wrapper">
<div class="item-order-list">
<ul>
<li>
<div class="item-order-header">
<a href="store.html">
<i class="iconfont icon-shop"></i>小尤的店铺<i class="iconfont icon-arrow-right"></i>
</a>
<span>待发货</span>
</div>
<div class="item-order-content">
<a href="order-detail.html">
<div class="img-area">
<div><img src="data:images/1.png" alt="?"></div>
</div>
<div class="text-area"><p class="ellipsis-3">尽享休闲美味时刻甜橙</p></div>
<div class="sub-area">
<span>￥100.00</span>
<em>x1</em>
</div>
</a>
</div>
<div class="item-order-foot">
<p>共一件商品，合计:<em>￥100.00</em><span>(含运费￥0.00)</span></p>
</div>
</li>
<li>
<div class="item-order-header">
<a href="store.html">
<i class="iconfont icon-shop"></i>小尤的店铺<i class="iconfont icon-arrow-right"></i>
</a>
<span>待发货</span>
</div>
<div class="item-order-content">
<a href="order-detail.html">
<div class="img-area">
<div><img src="data:images/2.png" alt="?"></div>
</div>
<div class="text-area"><p class="ellipsis-3">尽享休闲美味时刻甜橙</p></div>
<div class="sub-area">
<span>￥100.00</span>
<em>x1</em>
</div>
</a>
</div>
<div class="item-order-foot">
<p>共一件商品，合计:<em>￥100.00</em><span>(含运费￥0.00)</span></p>
</div>
</li>
</ul>
</div>
</div>
<script>
var oHtml=document.getElementsByTagName("html")[0];
var iWidth=document.documentElement.clientWidth;
iWidth=iWidth>750?750:iWidth;
oHtml.style.fontSize=iWidth/10+"px";
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>测试</title>
<link rel="stylesheet" href="css/base.css">
<style>
.flex ul {
padding-left: .24rem;
background: #fff;
border-top: 1px #e5e5e5 solid;
border-bottom: 1px #e5e5e5 solid;
font-size: 0
} .flex li {
display: flex;
width: 100%;
border-bottom: 1px #e5e5e5 solid
} .flex li:last-child {
border-bottom: none
} .flex .left, .flex .right {
padding: .4rem 0;
height: 1.4rem;
box-sizing: border-box
} .flex .left {
flex: 0 0 1.95rem
} .flex .right {
flex: 1
} .flex .left .avatar, .flex .left .text {
display: inline-block;
width: .98rem;
} .flex .left .text span {
display: inline-block;
font-size: .3rem;
color: #888
} .flex .left .avatar,
.flex .left .text {
vertical-align: middle;
} .flex .left .avatar {
width: .6rem;
height: .6rem;
text-align: center;
overflow: hidden;
border-radius: 100%
} .flex .left .avatar img {
height: 100%;
} .flex .right .info p {
font-size: .32rem;
color: #444
} .flex .right .info em {
font-size: .28rem;
color: #666
}
</style>
</head>
<body>
<div class="wrapper">
<div class="content flex">
<ul>
<li>
<div class="left">
<div class="text">
<span>周五</span>
<span>8-14</span>
</div>
<div class="avatar">
<img src="data:images/1.png">
</div>
</div>
<div class="right">
<div class="info">
<p>100.00</p>
<em>提现-2小时内到账</em>
</div>
</div>
</li>
<li>
<div class="left">
<div class="text">
<span>周五</span>
<span>8-14</span>
</div>
<div class="avatar">
<img src="data:images/2.png">
</div>
</div>
<div class="right">
<div class="info">
<p>100.00</p>
<em>提现-2小时内到账</em>
</div>
</div>
</li>
</ul>
</div>
<script>
var oHtml = document.getElementsByTagName("html")[0];
var iWidth = document.documentElement.clientWidth;
iWidth = iWidth > 750 ? 750 : iWidth;
oHtml.style.fontSize = iWidth / 7.5 + "px";
</script>
</body>
</html>
移动端list布局，左边固定，右边自适应的更多相关文章
- flex左右布局 左边固定 右侧自适应
flex左右布局 左边固定 右侧自适应 想要保证自适应内容不超出容器怎么办. 通过为自适应的一侧设置width: 0;或者overflow: hidden;解决. 首先实现标题的布局,也很简单: &l ...
- HTML布局之左右结构，左边固定右边跟据父元素自适应
HTML布局之左右结构,左边固定右边跟据父元素自适应,兼容IE6+.Firefox.Chrome.Opera.Safari,这里是用表单写的一个demo,其实就在主体布局中也是可以的,比如像后台一些管 ...
- CSS自适应布局(左右固定 中间自适应或者右侧固定 左侧自适应)
经常在工作中或者在面试中会碰到这样的问题,比如我想要个布局 右侧固定宽度 左侧自适应 或者 三列布局 左右固定 中间自适应的问题. 下面我们分别来学习下,当然我也是总结下而已,有如以下方法: 一: 右 ...
- html布局,左侧固定右侧自适应
前几天看到我们的UI稿,要实现左侧固定树结构,右侧自适应.想着自己写过几次但是每次都会忘记,在这里做个笔记. 第一种方法: <!DOCTYPE html> <html lang=&q ...
- css网页布局 --- 左边固定，右边自适应
div的布局统一如下: <body> <div class="wrap"> <div class="left"></d ...
- css-两个div并排，左边宽度固定右边自适应的布局 的实现方法
<div class= "container"> <div class="left"></div> <div clas ...
- css布局两边固定中间自适应的四种方法
第一种:左右侧采用浮动 中间采用margin-left 和 margin-right 方法. 代码如下: <div style="width:100%; margin:0 auto;& ...
- css布局两端固定中间自适应
第一种:采用浮动 1.1首先来看一下网上一个哥们给的代码 <body> <div class="left">左</div> <div cl ...
- css布局：左边固定宽度，右边自适应宽度或右侧固定，左侧自适应三种方法
方法一:浮动布局 这种方法我采用的是左边浮动,右边加上一个margin-left值,让他实现左边固定,右边自适应的布局效果 HTML Markup <div id="left" ...
- css 关于两栏布局，左边固定，右边自适应
好几个星期都没写博客了,最近不忙也不闲,稀里糊涂过了两个星期,之前几个月内天天坚持签到.最近也没签到.哈哈,说正事. 今天做东钿互金平台后台页面,昨天做了一个登录页面,业偶碰到了一个难题.等下也要把它 ...
随机推荐
- node解析post表单信息
一共有4种解析方式 urlencoded.json.text .raw 发起请求的form表单中可以设置三种数据编码方式 application/x-www-form-urlencoded.multi ...
- 学习CSS
CSS教程 菜鸟教程 通过使用CSS我们可以大大提升网页开发的工作效率 什么是CSS? CSS指层叠样式表(Cascading Style Sheets) 样式定义如何显示HTML元素 样式通常存储在 ...
- [BZOJ2809][Apio2012]dispatching（左偏树）
首先对于一个节点以及它的子树,它的最优方案显然是子树下选最小的几个 用左偏树维护出每棵子树最优方案的节点,记录答案 然后它的这棵树可以向上转移给父节点,将所有子节点的左偏树合并再维护就是父节点的最优方 ...
- dfs Gym - 100989L
AbdelKader enjoys math. He feels very frustrated whenever he sees an incorrect equation and so he tr ...
- Ubuntu server中 samba的安装和简单配置
samba是Linux系统上的一种文件共享协议,可以实现Windows系统访问Linux系统上的共享资源,现在介绍一下如何在Ubuntu 14.04上安装和配置samba 工具/原料 Ubuntu ...
- 9 udp广播
udp有广播 写信 tcp没有广播· 打电话 #coding=utf-8 import socket, sys dest = ('<broadcast>', 7788) # 创建udp ...
- 关于springboot 连接mysql 数据库报错问题
springboot连接MySQL运行报错: The server time zone value 'Öйú±ê׼ʱ¼ä' is unrecognized or represents more ...
- java设计模式大全 Design pattern samples in Java(最经典最全的资料)
java设计模式大全 Design pattern samples in Java(最经典最全的资料) 2015年06月19日 13:10:58 阅读数:11100 Design pattern sa ...
- (原)一段看似美丽的for循环，背后又隐藏着什么
之前很长一段时间,潜心修炼汇编,专门装了一个dos7,慢慢玩到win32汇编,再到linux的AT&A汇编,尝试写mbr的时候期间好几次把centos弄的开不了机,又莫名其妙的修好了,如今最大 ...
- 深度学习-CNN tensorflow 可视化
tf.summary模块的简介 在TensorFlow中,最常用的可视化方法有三种途径,分别为TensorFlow与OpenCv的混合编程.利用Matpltlib进行可视化.利用TensorFlow自 ...