参考滴滴左右对齐自适应
目前做过几次 左右对齐。而且文字不一样 多少
每次需要调试很多次。遂模仿滴滴 做了一个demo
------------------------
<dl>
<dt>扣费金额 :</dt>
<dd>88.10元扣费金额</dd>
</dl>
----------------------
/*各个部分样式*/
@charset "utf-8";
.detail-outer {
padding: 0 1.5rem;
width: 100%;
height: auto;
padding-top: 1rem;
}
.detail {
width: 100%;
height: auto;
background: #fff;
border: 1px #D2D2D2 solid;
margin: 2rem auto;
padding: 1.5rem 1.5rem 6rem 1.5rem;
position: relative;
}
.detail .title {
font-size: 1.4rem;
margin-bottom: 0.5rem;
}
.detail .time {
color: #838383;
font-size: 1.1rem;
margin-bottom: 1rem;
}
.detail dl {
font-size: 1.2rem;
margin-bottom: 0.5rem;
overflow: hidden;
}
.detail dl dt {
float: left;
width: 6rem;
color: #B1B1B1;
}
.detail dl dd {
margin-left: 6rem;
width: auto;
color: #000000;
word-break: break-word;
}
.detail dl:last-child:after {
content: " ";
position: absolute;
left: 0;
bottom: 5rem;
width: 100%;
height: 1px;
border-top: 1px #DDDDDD solid;
color: #D9D9D9;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
.look {
position: absolute;
left: 0;
bottom: 0;
font-size: 1.4rem;
color: #000;
width: 100%;
height: 5rem;
line-height: 5rem;
padding-left: 1.5rem;
}
.look:after {
position: absolute;
right: 1.5rem;
top: 50%;
width: 12px;
height: 12px;
margin-top: -6px;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
-ms-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
content: '';
}
------------------------------------
dl dt 布局 且float:left
清除浮动需要在父元素 dl添加 overflow:hidden;
clear:both闭合浮动。
overflow:hidden清除浮动
详细可以搜索了解
---------------------------
下载地址 http://files.cnblogs.com/files/leshao/didi%E5%8F%82%E8%80%83%E6%BB%B4%E6%BB%B4%E5%B7%A6%E5%8F%B3%E5%AF%B9%E9%BD%90.rar
-
转载于:https://www.cnblogs.com/leshao/p/5742498.html
参考滴滴左右对齐自适应相关推荐
- Polyworks脚本开发学习笔记(十九)-将数据对象与参考对象对齐的方法
Polyworks脚本开发学习笔记(十九)-将数据对象与参考对象对齐的方法 把开发手册理了一遍,发现还有几个点没有记录下来,其中一个就是使用点对的粗对齐和使用参考目标的精确对齐.为了把这个学习笔记凑够 ...
- ReMILO:使用短读和长读的参考辅助错配检测算法
ReMILO:使用短读和长读的参考辅助错配检测算法 鲍古德, 宋长进, 凌小兰 作者须知 Bioinformatics,第34卷,第1期,2018年1月1日,第24-32页,https: //doi ...
- 顶级c程序员之路 选学篇-1 深入理解字节,字节序与字节对齐
深入理解字节,字节序与字节对齐 一 总述 作为一个职业的coder玩家,首先应该对计算机的字节有所了解. 我们经常谈到的2进制流,字节(字符)流,数据类型流(针对编程),结构流等说法,2进制流,0和 ...
- oracle安装卡在create inventory_滴滴云服务器上安装Oracle12cR2单实例数据库
一.相关说明 Oracle数据库是由美国甲骨文公司推出的一款优秀的关系型数据库.当前最新版为Database 19c.本文简述Oracle Database 12cR2在滴滴云主机上的安装过程.如需更 ...
- openfalcon 组件监控_使用滴滴云快速搭建 Open-Falcon 监控平台
最近笔者申请了一个开源项目的支持计划,获得了 滴滴云 的一台免费的服务器一段时间. Open-Falcon 是非常优秀的一款开源监控系统,正好最近想弄一个测试环境尝试下 Open-Falcon,把此次 ...
- 基于滴滴云主机搭建 FTP 文件共享服务器(一)
FTP 简单介绍 什么是 FTP 服务器? FTP 服务器(File Transfer Protocol Server)是在互联网上提供文件共享存储和访问服务的计算机,它们依照 FTP 协议提供服务. ...
- Latex表格线宽修改方法以及内容左对齐。
Latex表格线宽修改方法 前言 代码如下 前言 关于Latex表格的详细参数说明,可以参考:latex表格手把手超详细教程. 关于左对齐,可以参考:左对齐与缩进. 本文主要是针对三行线表格线宽粗细, ...
- 【前端大屏实战1】Vue+Echarts -- 大屏简介初体验 => 大屏自适应缩放解决方案 => 使用transform:scale => 组件化抽离ScaleBox=>【两分钟实现大屏宽高等比例】
如果累了就冬眠吧,如果睡不着,就接纳暂时的失眠,不强迫自己入睡. 目录 一.大屏简介 1.数据可视化 2.大屏用途 3.大屏效果展示 二.大屏需求分类 1.固定尺寸的"真实"大屏 ...
- 双麦克风语音增强之ANF 自适应零点形成
概述 ANF(Adaptive Null-Forming,自适应零点形成)是双麦克风阵列处理中实现语音增强的一种方法.ANF算法适用的场景是目标信号来自于端射(endfire)方向,比如通话时的蓝牙耳 ...
最新文章
- 反编译软件dnSpy中修改baml文件
- 对比四种爬虫定位元素方法,你更爱哪个?
- shiro 文档_spring---Shiro拦截器
- Android Context activity实例使用
- Xamarin图表开发基础教程(5)OxyPlot框架
- 上海python培训班-上海哪家python培训班比较靠谱?
- CenOS6.5安全加固及性能优化(脚本)
- Be Positive
- [Vue]组件——通过$emit为组件自定义事件
- SparkCore基础
- STM32 定时器输出pwm的频率计算方法 PWM 频率检测方法 直流电机的位置控制
- 人脸识别的Python库
- windows安装多个maven_全网最容易理解的Maven安装、配置、集成演示
- Lync Server 2013 实战系列之二:标准版-前期准备
- Microsoft caffe cifar实例编译之model的生成
- 6m缓存和8m缓存差距_i7-9700和i7-9700K性能差距多大?i7-9700和i7-9700K区别对比评测...
- 基于Java毕业设计中国古诗词学习平台源码+系统+mysql+lw文档+部署软件
- html代码学习离线文档,新手学HTML代码的简易方法
- matlab中停止调试快捷键,matlab停止运行快捷键
- PPT打印预览无背景
热门文章
- Python统计网站访问日志log中的IP信息,并排序。。
- 深度学习输入模式与适当的网络架构之间的对应关系
- 人大经济论坛:统计学的一些经典教材
- qt程序在Linux下字体乱了,解决linux/Ubuntu下Qt creater 界面程序在编译运行后无法显示中文或中文乱码问题!...
- 下列不可以判断网页是否正常打开的是_打开视频卡、无法加载原因查找
- google 浏览器清除缓存
- 007_Maven依赖管理
- 004_ZooKeeper客户端基础命令
- 004_Redis的String数据类型
- 高等学校精品规划教材 计算机专业英语,计算机专业英语