标签：font class ble youdao 20px body com 技术 osi
【问题描述】左侧文字，右侧图片。 左侧上方为广告描述，下方为“广告 ×”。 上方广告描述可能为一行，两行，三行；下方“广告” 和 “ ×” 的相对位置不同，如图。
在看参考代码前，可自己先试着写写。
=====================================
【参考代码】
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>广告</title> <style> .section { line-height: 40px; font-size: 15px; text-align: justify; margin: 10px 0; position: relative; } .relative { position: relative; } .clear-fix:after { clear: both; content: ""; display: block; } .right-img { float: right; width: 150px; height: 120px; } .left-txt { margin-right: 150px; } .left-txt .p-txt { min-height: 80px; } .right-img img { width: 100%; height: 100%; } .pull-right{ float: right; } </style> </head> <body> <div class="section clear-fix"> <div class="right-img"> <img src="head.jpg" alt="头像"> </div> <div class="left-txt"> <div class="p-txt">去哪儿旅行频道在旅游攻略。</div> </div> <span class="relative">广告</span> <span class="pull-right">×</span> </div> <div class="section clear-fix"> <div class="right-img"> <img src="head.jpg" alt="头像"> </div> <div class="left-txt"> <div class="p-txt">去哪儿旅行频道在旅游攻略。去哪儿旅行频道在旅游攻略。</div> </div> <span class="relative">广告</span> <span class="pull-right">×</span> </div> <div class="section clear-fix"> <div class="right-img"> <img src="head.jpg" alt="头像"> </div> <div class="left-txt"> <div class="p-txt">去哪儿旅行频道在旅游攻略。去哪儿旅行频道在旅游攻略。攻略</div> </div> <span class="relative">广告</span> <span class="pull-right">×</span> </div> </body> </html>
标签：font class ble youdao 20px body com 技术 osi
原文地址：http://www.cnblogs.com/codelovers/p/6021225.html
