0

我在让各种产品在我的网站上正确排列时遇到了一些麻烦。有些项目的名称足以创建第二行文本,当这样做时,项目仍然与文本的顶部对齐,而不是与每个图像的顶部对齐。基本上我希望它占用每个 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;

}
4

1 回答 1

0

嗯,如果我正确理解了您的问题,则给.new_prod_box > a:first-child(仅选择内部的第一个顶级<a>元素.new_prod_box)定义的高度应该可以满足您的需求。只要高度足以容纳两行文本,它就会将下面的元素保持在相同的位置,但仍会为标题留出空间分成两行。

如果这不是您想要的,请告诉我,我很乐意为您提供进一步的帮助!

(编辑:)要将单行标题对齐到图像的顶部(而不是在它们之间有空格),您可以尝试这种方法,我认为它会起作用。

首先,稍微修改一下您的 HTML 结构,在第一个元素中添加一个<span>内部:<a>

<div class="new_prod_box">
  <a href="details.html">
    <span>
      '.$title.'
    </span>
  </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 > a:first-child{
   height: [tall enough for two lines];
   position:relative;
}
.new_prod_box > a:first-child span{
   display:block;
   position:absolute;
   bottom:0;
   left:0;
   width:100%;
   text-align:center;
}

我相信这应该给你你想要的。不过试试看,让我知道会发生什么。

于 2013-08-07T17:36:43.653 回答