Aligning to the bottom of an li?_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2022-12-27 22:15 出处：网络

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 pro

相关专题：css html-lists

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.