Выравнивание в нижней части ли? - PullRequest
Новая
       11

Выравнивание в нижней части ли?

1 голос
/ 22 апреля 2010

Я хочу сделать это без JavaScript.

Я не могу понять, как сделать так, чтобы все li с классом "item" выравнивались по низу div # недавнего. По сути, каждый li имеет ширину 192 пикселя. Проблема заключается в том, что каждое изображение товара имеет разную высоту, поэтому, если оно имеет высоту всего 40 пикселей, текст находится не на той позиции, что рядом с ним. 

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

Есть идеи?

Ответы [ 4 ]

0 голосов
/ 29 июля 2011

vertical_align основано на высоте строки родительского элемента. Итак 

li {height: 100px; line-height:100px}
p {vertical-align:bottom}
0 голосов
/ 22 апреля 2010

Оберните ваши изображения в свой собственный контейнер (например, в другой 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 или что-то еще.

0 голосов
/ 27 июля 2011

Возможно, уже слишком поздно отправлять ответ, но у меня недавно была такая же проблема. Вот решение: 

<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 делает трюк.

0 голосов
/ 22 апреля 2010

Вы пробовали использовать CSS?На вашем div, установите vertical-align: bottom, и установите line-height & height на то же значение?

...