<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>简单的文件树效果</title> <meta content="text/html; charset=utf-8" /> <script type="text/javascript" src="jquery.min.js"></script> <style type="text/css"> .mould{ width: 120px; height: 160px; display: inline-block; margin:0px 10px 30px 10px; font-size: 12px; text-align: center; } .mould img{ border: 1px solid black; } .mould span{ } </style> </head> <body> <div> <div id="list"> <div class="mould"> <img height="120" width="120" src="folder.png"> <input type="checkbox"> <span>大法师打发打发是打发打萨达</span> </div> <div class="mould"> <img height="120" width="120" src="folder.png"> <input type="checkbox"> <span>大法师</span> </div> </div> </div> </body> </html>
需求:打开页面会看见,两个图片不在一个水平线上,原因为下面的span标签字体过多导致将图片向上顶,这里面标签可以随便换,样式随便写,只要能满足两个图片平齐就好
Smart猫小萌
相关分类