一般让div 里的span 靠右对齐用的方法比较多的是float:right。
这次由于各种原因我不想用float
先看效果:
HTML 部分
<div class="customer-block"> <span class="phone-num">400-888-8888</span> <span class="open-time">周一至周五9:00-18:00</span> <span class="goto-span"> <img class="check" src="<?php echo static_url_res(); ?>/image/goto.png"> </span> </div>
CSS 部分
.customer-block{ width:994px; margin:0 auto; border: 2px solid #000; box-sizing: border-box; line-height: 155px; position: relative; } .phone-num{ margin-left: 50px; font-size: 44px; color: #000; vertical-align: middle; } .open-time{ margin-left: 50px; font-size: 34px; color: #818181; vertical-align: middle; } .goto-span{ display: inline-block; position: absolute; right: 50px; } .check{ vertical-align: middle; }
通过设置customer-block(父容器)的position:relative;line-height:155px;
goto-span(子元素的wrap)的position:absolute;right:50px;
check(子元素)vertical-align:middle。