CSS实现豆腐块 作者：马育民 • 2021-06-07 15:28 • 阅读：10085 实现下图豆腐块效果： [](https://www.malaoshi.top/upload/pic/html/QQ20210607153723.png) ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } body{ color: #666; font-size: 12px; } a{ color: #666; font-size: 12px; text-decoration: none; } .box{ width: 930px; border: 1px solid black; height: 345px; margin: 0 auto; } .item{ float: left; height: 160px; width: 220px; margin: 0 0 10px 10px; /* border: 1px solid red; */ } .item img{ width: 220px; } .item-name{ margin: 10px 0 10px 0; } .item-price{ float: right; /*不加下面3个属性，会发生错位*/ position: absolute; bottom: 0; right: 5px; } .item-price .item-money{ font: 22px/1.5 tahoma; color: #f60; } .item-info{ position: relative; height: 20px; } </style> </head> <body> <div> <div class="box"> <div class="item"> <img src="1111.jpg" alt=""> <p class="item-name"> <a href="#">北京贝尔特酒店</a> </p> <p class="item-info"> <a href="#">起前门/天坛公园/崇文门</a> <span class="item-price"> ¥<span class="item-money">517</span> </span> </p> </div> <div class="item"> <img src="1111.jpg" alt=""> <p class="item-name"> <a href="#">北京贝尔特酒店</a> </p> <p class="item-info"> <a href="#">起前门/天坛公园/崇文门</a> <span class="item-price"> ¥<span class="item-money">517</span> </span> </p> </div> <div class="item"> <img src="1111.jpg" alt=""> <p class="item-name"> <a href="#">北京贝尔特酒店</a> </p> <p class="item-info"> <a href="#">起前门/天坛公园/崇文门</a> <span class="item-price"> ¥<span class="item-money">517</span> </span> </p> </div> <div class="item"> <img src="1111.jpg" alt=""> <p class="item-name"> <a href="#">北京贝尔特酒店</a> </p> <p class="item-info"> <a href="#">起前门/天坛公园/崇文门</a> <span class="item-price"> ¥<span class="item-money">517</span> </span> </p> </div> <div class="item"> <img src="1111.jpg" alt=""> <p class="item-name"> <a href="#">北京贝尔特酒店</a> </p> <p class="item-info"> <a href="#">起前门/天坛公园/崇文门</a> <span class="item-price"> ¥<span class="item-money">517</span> </span> </p> </div> </div> </div> </body> </html> ``` 原文出处：/show_1IX1GeGUhdvb.html