移动端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 关于两栏布局，左边固定，右边自适应
好几个星期都没写博客了,最近不忙也不闲,稀里糊涂过了两个星期,之前几个月内天天坚持签到.最近也没签到.哈哈,说正事. 今天做东钿互金平台后台页面,昨天做了一个登录页面,业偶碰到了一个难题.等下也要把它 ...
随机推荐
- asp.net core mvc简介
MVC 通常而言,我们使用.NET Core MVC 构建网页应用与 API,MVC是使用模型-视图-控制器(Model-View-Controller)设计模式. 创建项目 使用如下命令创建一个名称 ...
- R语言绘图：词云图
使用wordcloud2绘制词云图 library(wordcloud2) findwords<-function(tf){ txt<-scan(tf,"") wl&l ...
- 【Leetcode】807. Max Increase to Keep City Skyline
Description In a 2 dimensional array grid, each value grid[i][j] represents the height of a building ...
- 集成运放输入电压范围指标参数Uicmax，Uidmax
图中Uicmax最大共模输入电压:是运放能正常工作下的最大输入电压: Uidmax最大差模输入电压:是运放要损坏的最大输入电压
- JAVA多进程入门
概念 并行和并发 并行:物理上的实现,在同一时间点上发生 并发:两个事件在一个时间段内发生,如单片机的单核多线程 进程和线程 进程:一个应用程序可以有多个进程,每一个进程有一个独立的内存空间 线程:一 ...
- jpa Specification复杂查询
public List<Receipts> test(List<String> costIds){ Specification<Receipts> specific ...
- 2、Java并发编程：如何创建线程
Java并发编程:如何创建线程? 在前面一篇文章中已经讲述了在进程和线程的由来,今天就来讲一下在Java中如何创建线程,让线程去执行一个子任务.下面先讲述一下Java中的应用程序和进程相关的概念知识, ...
- 玩转Vim-札记（二）
玩转Vim-札记(二) 距上篇博文已有一周有余,上次主要介绍了编辑器之神Vim的起源.安装并介绍了两种模式以及一些简单的操作.本次将继续对Vim的使用进行介绍. 登堂入室 首先接着说移动吧: 0 → ...
- linux备忘录-例行性工作排程 (crontab)
例行性工作排程 例行性工作排程分为两类 at at是只执行一次就结束的指令安排.要想使用at,必须要有atd服务的支持. crontab crontab是每隔一段时间自动执行的指令安排.crontab ...
- ASP.NET CORE 2.0 文档中文正式版已经出来了
https://docs.microsoft.com/zh-cn/aspnet/core/