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 回答