css - 有没有办法让第二行文本垂直填充？

Question

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

这是一张解释我的意思的图片:my website

这是我的 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;

}

Answer 1

嗯，如果我理解正确你的问题，给 .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;
}

我相信这应该能满足您的需求。不过请尝试一下，让我知道会发生什么。