对齐李的底部？

我想这样做不使用JavaScript。对齐李的底部？

我无法弄清楚如何让类“item”的所有li与div＃最近的底部对齐。基本上，每个li是192px宽。问题是，每个产品图片都是不同的高度，所以如果只有40px高，则文本位于与旁边不同的位置。

<div id="recent"> 
<h2>Recent Items</h2> 
<ul> 
    <li class="item"> 
     <img src="images/product1.png" /> 
     <a href="#"> 
      Product Name Here<br/> 
      Brand Name Here 
     </a> 
     <p>$182.32</p> 
    </li> 
</ul> 
</div>

任何想法？

来源

2010-04-21 Matthew

你可以添加你已经有的CSS代码？对于#recent，ul和.item尤其如此？ – Beno 2010-04-21 21:03:25

将自己的图像包裹在自己的容器中（像另一个div），并给该容器一个特定的高度。

<div id="recent"> 
<h2>Recent Items</h2> 
<ul> 
    <li class="item"> 
     <div class = "img_wrapper"><img src="images/product1.png" /></div> 
     <a href="#"> 
      Product Name Here<br/> 
      Brand Name Here 
     </a> 
     <p>$182.32</p> 
    </li> 
</ul> 
</div>

在你的CSS中，给.img_wrapper高度50px或其他。

来源

2010-04-21 21:15:35

问题是，即使我对所有人都有相同的高度，图像仍保留在部分的顶部。所有单词（产品名称等）都完美地排列，但短小的图像看起来很奇怪，因为图像底部和产品名称的顶部之间有太多空间。我还应该尝试什么？ – Matthew 2010-04-22 01:37:28

你能发布一个链接到问题的例子吗？ – 2010-04-22 01:57:29

我没有在线（在本地计算机上开发）。我想通过position：absolute和bottom：0可以将它锚定到底部，但是左右变得很奇怪（图像大小不同）。我可能只需要使用表（我知道这是一个很大的否），但我不知道还有什么要做。 – Matthew 2010-04-22 03:06:31

您是否尝试过使用CSS？在你的div上，设置vertical-align：bottom，并将行高设置为&高度为相同的值？

来源

2010-04-21 21:03:01 TheGeekYouNeed

可能提交答案为时已晚，但最近我也遇到了同样的问题。这里是一个解决方案：

<head> 
<style> 
    #recent ul { 
    list-style-type: none; 
    font-size: 17px; 
} #recent li { 
    float: left; 
} li div { 
    vertical-align: bottom; 
    height: 415px;/ *max height */ 
    width: 285px; 
    display: table-cell; 
} 
</style> 
</head> 

<div id="recent"> 
    <ul> 
     <li><div> 
      <img src="pic1.jpg" /> 
      <p><a href="#">Product Name Here</a></p> 
      <p>$182.32</p> 
     </div></li> 
     <li><div> 
      <img src="pic2.jpg" /> 
      <p><a href="#">Product Name Here</a></p> 
      <p>$182.32</p> 
     </div></li> 
    </ul> 
</div>

但你仍然必须指定div的高度。 display: table-cell有窍门。

来源

2011-07-27 18:28:45 ivkremer

vertical_align基于父元素的行高。所以

li {height: 100px; line-height:100px} 
p {vertical-align:bottom}

来源

2011-07-29 09:39:47 holodigm

对齐李的底部？

回答

相关问题