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;
}

我认为应该给你你想要的东西。试试吧，让我知道会发生什么。

有没有办法让第二行文字垂直填充？

1 个答案: