移动端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 关于两栏布局，左边固定，右边自适应
好几个星期都没写博客了,最近不忙也不闲,稀里糊涂过了两个星期,之前几个月内天天坚持签到.最近也没签到.哈哈,说正事. 今天做东钿互金平台后台页面,昨天做了一个登录页面,业偶碰到了一个难题.等下也要把它 ...
随机推荐
- go学习笔记-变量和常量
变量和常量 变量 基本写法 //定义一个名称为"variableName",类型为"type"的变量 var variableName type //定义三个类 ...
- （数据科学学习手札05）Python与R数据读入存出方式的总结与比较
在数据分析的过程中,外部数据的导入和数据的导出是非常关键的部分,而Python和R在这方面大同小异,且针对不同的包或模块,对应着不同的函数来完成这部分功能: Python 1.TXT文件 导入: 以某 ...
- Educational Codeforces Round 47 (Rated for Div. 2) ：B. Minimum Ternary String
题目链接:http://codeforces.com/contest/1009/problem/B 解题心得: 题意就是给你一个只包含012三个字符的字符串,位置并且逻辑相邻的字符可以相互交换位置,就 ...
- shell -- sed用法
sed是一个很好的文件处理工具,本身是一个管道命令,主要是以行为单位进行处理,可以将数据行进行替换.删除.新增.选取等特定工作,下面先了解一下sed的用法sed命令行格式为: sed ...
- VI的配置
vi下设置tab键为4个空格 在每个用户的主目录下,都有一个 vi 的配置文件".vimrc"或".exrc",没有的可以新建一个.用户可以编辑它,使这些设置在 ...
- php 使用GD库压缩图片，添加文字图片水印
先上一个工具类,提供了压缩,添加文字.图片水印等方法: image.class.php <?php class Image { private $info; private $image; pu ...
- 『JavaScript』new关键字
原文 new关键字做了什么 在JavaScript中,使用new关键字后,意味着做了如下四件事情: 创建一个新的对象,这个对象的类型是object: 设置这个新的对象的内部.可访问性和[[protot ...
- 初探Qt Opengl【1】
最近一直在学习Qt的opengl绘图,看到好多资源都是关于以前的旧版本的, 我将我这几天学的的部分关于opengl的做个总结,也希望对需要学习的人有一定的帮助 在我的学习中,我主要用到一下三个方法 # ...
- ADVICE FOR SHORT-TERM MACHINE LEARNING RESEARCH PROJECTS（短期机器学习研究的建议）
– Tim Rocktäschel, Jakob Foerster and Greg Farquhar, 29/08/2018 Every year we get contacted by stude ...
- C++STL——set
一.相关定义 set 集合,有唯一性,即每一个元素只有一个: 是一个有序的容器,里面的元素都是排序好的: 支持插入,删除,查找等操作. 注意 set中的元素可以是任意类型的,但是由于需要排序,所以元素 ...