<!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布局,左边固定,右边自适应的更多相关文章

  1. flex左右布局 左边固定 右侧自适应

    flex左右布局 左边固定 右侧自适应 想要保证自适应内容不超出容器怎么办. 通过为自适应的一侧设置width: 0;或者overflow: hidden;解决. 首先实现标题的布局,也很简单: &l ...

  2. HTML布局之左右结构,左边固定右边跟据父元素自适应

    HTML布局之左右结构,左边固定右边跟据父元素自适应,兼容IE6+.Firefox.Chrome.Opera.Safari,这里是用表单写的一个demo,其实就在主体布局中也是可以的,比如像后台一些管 ...

  3. CSS自适应布局(左右固定 中间自适应或者右侧固定 左侧自适应)

    经常在工作中或者在面试中会碰到这样的问题,比如我想要个布局 右侧固定宽度 左侧自适应 或者 三列布局 左右固定 中间自适应的问题. 下面我们分别来学习下,当然我也是总结下而已,有如以下方法: 一: 右 ...

  4. html布局,左侧固定右侧自适应

    前几天看到我们的UI稿,要实现左侧固定树结构,右侧自适应.想着自己写过几次但是每次都会忘记,在这里做个笔记. 第一种方法: <!DOCTYPE html> <html lang=&q ...

  5. css网页布局 --- 左边固定,右边自适应

    div的布局统一如下: <body> <div class="wrap"> <div class="left"></d ...

  6. css-两个div并排,左边宽度固定右边自适应的布局 的实现方法

    <div class= "container"> <div class="left"></div> <div clas ...

  7. css布局两边固定中间自适应的四种方法

    第一种:左右侧采用浮动 中间采用margin-left 和 margin-right 方法. 代码如下: <div style="width:100%; margin:0 auto;& ...

  8. css布局两端固定中间自适应

    第一种:采用浮动 1.1首先来看一下网上一个哥们给的代码 <body> <div class="left">左</div> <div cl ...

  9. css布局:左边固定宽度,右边自适应宽度或右侧固定,左侧自适应三种方法

    方法一:浮动布局 这种方法我采用的是左边浮动,右边加上一个margin-left值,让他实现左边固定,右边自适应的布局效果 HTML Markup <div id="left" ...

  10. css 关于两栏布局,左边固定,右边自适应

    好几个星期都没写博客了,最近不忙也不闲,稀里糊涂过了两个星期,之前几个月内天天坚持签到.最近也没签到.哈哈,说正事. 今天做东钿互金平台后台页面,昨天做了一个登录页面,业偶碰到了一个难题.等下也要把它 ...

随机推荐

  1. python2.7入门---file(文件)&OS 文件&目录方法

        首先file 对象使用 open 函数来创建,下表列出了 file 对象常用的函数: 序号 方法及描述 1 file.close() 关闭文件.关闭后文件不能再进行读写操作. 2 file.f ...

  2. C# String函数

    public static bool IsNullOrEmpty(string value) 如果 true 参数为 value 或空字符串 (""),则为 null:否则为 fa ...

  3. dispaly:-webkit-box 布局中的坑

    dispaly:-webkit-box 具体用法 这里大家可以网上查, 这里说下里面的坑 里面的子对象设置-webkit-box-flex: 1 -webkit-box-flex: 2 时:一般两个子 ...

  4. 接口测试工具postman(三)添加断言

    每个用例执行完成后,可以通过添加断言来判断返回结果是否正确,即表示用例执行是否成功. 官方说明文档:https://learning.getpostman.com/docs/postman/scrip ...

  5. Java并发基础--Thread类

    一.Thread类的构成 Thread类实现Runnable接口.部分源码如下: 二.Thread类常用方法 1.currentThread()方法 currentThread()方法可以返回代码段正 ...

  6. 七天入门C++

  7. 使用CodeBlocks编译64位程序(用的编译器仅仅是windows sdk的)

    需求: -CodeBlocks使用nightly版本: -Windows SDK(我使用的是6.0A,即微软针对vista的,因为这个比较小,你也可以选择其他版本但是要有64位编译器.他也适用于xps ...

  8. 在 C/C++ 中使用 TensorFlow 预训练好的模型—— 间接调用 Python 实现

    现在的深度学习框架一般都是基于 Python 来实现,构建.训练.保存和调用模型都可以很容易地在 Python 下完成.但有时候,我们在实际应用这些模型的时候可能需要在其他编程语言下进行,本文将通过 ...

  9. 无缘无故出现npm 解析异常的的问题 解决方案

    npm cache clean --force try if false delete package.lock.json try again if false npm set registry ht ...

  10. BZOJ 3998 TJOI2015 弦论 后缀自动机+DAG上的dp

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=3998 题意概述:对于一个给定长度为N的字符串,求它的第K小子串是什么,T为0则表示不同位置 ...