Aligning to the bottom of an li?
I want to do this without javascript.
I can't figure out how to make all li with class "item" align to the bottom of the div#recent. Basically, every li is 192px wide. The problem is that each product image is a different height, so if one is only 40px tall, the text is at a different position than the one next to it.
<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>
开发者_StackOverflow中文版 <p>$182.32</p>
</li>
</ul>
</div>
Any ideas?
Wrap your images in there own container (like another div) and give that container a specific height.
<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>
In your css, give .img_wrapper a height of 50px or whatever.
Have you tried using CSS? On your div, set vertical-align:bottom, and set line-height & height to the same value?
vertical_align is based on line-height of the parent element. So
li {height: 100px; line-height:100px}
p {vertical-align:bottom}
Probably it is too late to submit an answer but I had the same problem recently. Here is a solution:
<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>
But you still have to specify div's hight. display: table-cell does the trick.
加载中,请稍侯......
精彩评论