效果：
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>float_page</title> <style> *{margin: 0;padding: 0;} ul{list-style: none;} img{display: block;} a{text-decoration: none;color:aquamarine} h1,h2,h3{font-size: 16px;} .l{float:left;} .r{float:right;} .claer:after{content:"";display: block;clear: both;} #main{ width: 366px; margin: 20px auto; } #main .title{ height: 23px; line-height: 23px; font-size: 12px; font-weight: bold; padding-left: 30px; background:aqua ; } #main ul{ overflow: hidden; margin-top: 13px; } #main li{ margin-bottom: 22px; } #main .pic{ width: 99px; border: 1px solid #c8c4d3; margin-left: 5px; } #main .pic img{ margin: 2px; width: 100%; height: 100%; } #main .content{ width: 240px; font-size: 12px; margin-left: 13px; } #main .content h2{ line-height: 24px; } #main .content p{ line-height: 20px; } </style> </head> <body> <div id="main"> <h2 class="title">测试标题</h2> <ul> <li class="clear"> <div class="l pic"> <a href="#"> <img src="./image/1.png" alt=""> </a> </div> <div class="l content"> <h2>测试标题H2</h2> <p> 测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落 <a href="#">[详情]</a> </p> </div> </li> <li class="clear"> <div class="l pic"> <a href="#"> <img src="./image/1.png" alt=""> </a> </div> <div class="l content"> <h2>测试标题H2</h2> <p> 测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落 <a href="#">[详情]</a> </p> </div> </li> <li class="clear"> <div class="l pic"> <a href="#"> <img src="./image/1.png" alt=""> </a> </div> <div class="l content"> <h2>测试标题H2</h2> <p> 测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落 <a href="#">[详情]</a> </p> </div> </li> </ul> </div> </body> </html>
