對齊李的底部？

我想這樣做不使用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

對齊李的底部？

回答

相關問題