父元素为块级元素,子元素inline-block,因为行高而对不整齐调整位置
<div class="box-scan inline"> <span>扫描到手机</span> <div class="scan-to-mobile clearfix"> <span class="top-arrow"> <span></span> </span> <div class="scan-to-mobile-desc fl"> <p class="title">扫描到手机 新闻随时看</p> <p> <span class="desc">扫一扫,用手机看文本<br>更加方便分享给朋友</span> <i></i> </p> </div> <div class="scan-to-mobile-qrcode fr"> <img src="../images/consult_qrcode.png" alt="" width="118px" height="118px"> </div> </div> </div>
css:
.box-scan { position: relative; cursor: pointer; } .box-scan .scan-to-mobile { display: none; position: absolute; top: 30px; right: 0; width: 400px; border: 1px solid #ddd; border-radius: 2px; padding: 20px; background-color: #fff; } .box-scan .scan-to-mobile .top-arrow { position: absolute; right: 26px; top: -16px; border-style: solid; border-color: transparent transparent #ddd transparent; border-width: 8px; } .box-scan .scan-to-mobile .top-arrow span { position: absolute; left: -8px; top: -7px; border-style: solid; border-color: transparent transparent #fff transparent; border-width: 8px; } .box-scan .scan-to-mobile .scan-to-mobile-desc .title { font: 18px/30px 'Microsoft Yaahei'; color: #ff9900; margin-bottom: 20px; text-align: left; } .box-scan .scan-to-mobile .scan-to-mobile-desc .desc { display: inline-block; line-height: 24px; text-align: left; } .box-scan .scan-to-mobile .scan-to-mobile-desc i { position: relative; top: 5px; display: inline-block; width: 63px; height: 43px; background: url("../images/computer_mobile_icon.png"); } .box-scan .scan-to-mobile .scan-to-mobile-qrcode { width: 118px; height: 118px; overflow: hidden; }