目前做過幾次 ?左右對齊。而且文字不一樣 多少

?

?

每次需要調試很多次。遂模仿滴滴 做了一個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

總結

以上是生活随笔為你收集整理的参考滴滴左右对齐自适应的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。