参考滴滴左右对齐自适应
目前做過幾次 ?左右對齊。而且文字不一樣 多少
?
?
每次需要調試很多次。遂模仿滴滴 做了一個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
總結
以上是生活随笔為你收集整理的参考滴滴左右对齐自适应的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: java.lang.OutOfMemor
- 下一篇: JAVA中File类的使用