我在让各种产品在我的网站上正确排列时遇到了一些麻烦。有些项目的名称足以创建第二行文本,当这样做时,项目仍然与文本的顶部对齐,而不是与每个图像的顶部对齐。基本上我希望它占用每个 div 上方的一些空白空间以适应第二行文本,而不是将我的图片向下推并仅在顶部对齐。这是我用来在我的 PHP 中循环创建 div 的代码:
<div class="new_prod_box">
<a href="details.html">
'.$title.'
</a>
<div class="new_prod_bg">
<a href="details.html">
<img src="images/'.$image.'" alt="'.$title.'" title="" class="thumb" border="0" />
</a>
</div>
<a href="cart.php?action=add&id='.$id.'">
<u>Add to cart</u>
</a>
</div>
这是一张解释我的意思的图片:我的网站
这是我的 CSS 中的规则:
.new_prod_box{
float:left;
text-align:center;
padding:10px;
width:132px;
height:180px;
}
.new_prod_box a{
padding:5px 0 5px 0;
color:#b5b5b6;
text-decoration:none;
display:block;
}
.new_prod_bg{
width:132px;
height:119px;
text-align:center;
background:url(images/new_prod_box.gif) no-repeat center;
position:relative;
}