移动端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 关于两栏布局，左边固定，右边自适应
好几个星期都没写博客了,最近不忙也不闲,稀里糊涂过了两个星期,之前几个月内天天坚持签到.最近也没签到.哈哈,说正事. 今天做东钿互金平台后台页面,昨天做了一个登录页面,业偶碰到了一个难题.等下也要把它 ...
随机推荐
- DDL失败案例
问题描述 今天对线上某个业务的大表120G进行重建表操作时遇到报错,该表有个比较显著的特征是*写入量比较大,每天写入加更新的频率在数千万级别.大致的环境 1 版本:Percona 5.6.24 2 操 ...
- 代码混淆 iOS
该方法只能针对有.m.h的类进行混淆,静态库等只有.h文件的没法进行混淆 代码混淆,刚刚看到是不是有点懵逼,反正我是最近才接触到这么个东西,因为之前对于代码和APP,只需要实现功能就好了,根本没有考虑 ...
- IOException: win32 io returned 267. Path:
unity3d在导出android项目时出现了这个错误,找了一圈也没找到原因,最后把项目名中空格去掉后OK了,坑啊!!!!
- mybatis if标签比较字符串
项目中需要在mybatis后台比较字符串 因为mybatis映射文件使用的是ognl表达式,所以不能使用 <if test="type == '0'"> 解决: < ...
- Leetcode代码补全——二叉树
在刷leetcode的过程中发现,在原网页输入答案是不需要自己构筑树和链表的,虽然便于直接思考算法,但是久而久之类似过于依赖编辑器,反而不知道如何创建树和链表,因此总结了该网页省略的部分,以其中题为例 ...
- Java IO学习--File类
一.File类 File类具备一定的误导性,可能容易认为它指代的是文件,实际并非如此,它既能代表一个特定文件的名称,又能表示一个目录下一组文件的名称.简而言之,File类是文件或者目录路径名的抽象表示 ...
- HDFS伪分布式
(一).HDFS shell操作 以上已经介绍了如何搭建伪分布式的Hadoop,既然环境已经搭建起来了,那要怎么去操作呢?这就是本节将要介绍的内容: HDFS自带有一些shell命令,通过这些命令我们 ...
- POJ 2162 Document Indexing（模拟）
Description Andy is fond of old computers. He loves everything about them and he uses emulators of o ...
- Unity UGUI 图片 轴对称效果 减少资源
制作UI的过程中,为了节省资源,对称的图一般美术切一半给我们 手动拼图 有时会出现拼接处出现裂缝或重叠 调整大小时也不方便 得一块一块调整 所以就用BaseMeshEffect 的ModifyMesh ...
- Liz问题账户分析系统
1.理解liz工作情况,了解liz的问题,具有同理心.设想软件应该达成的目标,解决哪些业务. 第一步:就是从系统角度来理解软件,确定对所开发系统的综合要求,并提出这些需求的实现条件,以及需求应该达到的 ...