Обеспечение одинаковой высоты блока горизонтально выровненных DIV с неизвестной длиной содержимого

Question

На веб-сайте я хотел бы показать продукты со следующей структурой:

[IMAGE]
[PRODUCT TITLE]
[PRODUCT ID]
[DETAIL TEXT]
[FEATURE LIST]
[PRICE]

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

Дело в том, что на выставке представлено несколько товаров, например этот, но иногда они располагаются рядом друг с другом.

Проблема в том, что я хотел бы, чтобы цена появлялась в одной и той же позиции.(по вертикали) во всех блоках.Конечно, сначала я вижу только одно решение - переполнение: скрыто в подробном списке текстов / функций.Но тогда я бы закончил тем, что урезал контент, верно?

Другая проблема заключается в том, что должна быть еще кнопка >> (расширитель), которая появляется, если список UL / LI длиннее 4 записей,Точно так же:

Я часто думал об этом, но, похоже, не нашел правильного решения.Во-первых, я никогда не узнаю, будет ли LI многострочным, так как контент может быть длиннее или короче - и я не могу рассчитать этот сервер, так как ширина / высота шрифта может варьироваться.

Буду признателен за любой конструктивныйвведите здесь.

Спасибо!

Answer 1

Пока у вас есть фиксированная ширина, вы можете использовать inline-block, смешанный с отрицательными полями: http://jsfiddle.net/bymaK/11/

Печально то, что он работает в Chrome, Opera и IE 9, но полностью ломает Firefox, поскольку его управление с: 0 и отрицательное поле кажутся ошибочными (добавлено проблема # 709014 в Bugzilla после этого поста) , Решение состоит в том, чтобы обнаружить этот браузер и установить для него ширину 1px ...

Это создает небольшую ошибку, так как при изменении размера на 1 пиксель цена переходит к следующей строке, но не к блоку, но это гораздо менее заметно, чем результат в противном случае:

---

<div id="container">
    <p>texttexttext</p>
    <ul>
        <li>texttexttext</li>
        <li>texttexttext</li>
        <li>texttexttext<Update/li>
        <li>texttexttext</li>
        <li><a href="#" class="more">more &raquo;</a></li>
        <li class="more">more text</li>
        <li class="more">Even more text.</li>
    </ul>
</div><p class="price">$3993.99</p>

.price
{
    height:40px;
    display:inline-block;
    margin-left: -200px;
    margin-right: 200px;
    vertical-align: bottom;
    font-weight: bold;
}
#container
{
    display: inline-block;
    margin-right:10px;
    position:relative;
    width:200px;
    padding-bottom:40px;
    vertical-align: top;
}
ul
{
    list-style-type:disc;
    margin-left:30px
}
li.more
{
    display: none;
}

$(function(){
    $('a.more').click(function(){
        $(this).parent('li').hide().nextAll('li').show(200);
    }); 
});

Answer 2

Возможно, вы захотите использовать javascript, чтобы найти высоту и отобразить «клик для просмотра дополнительной ссылки».

Сначала создайте делитель над ценовым дивидендом, который будет содержать вашу ссылку «кликните, чтобы увидеть больше»и установите его на display:none.Затем вы можете использовать offsetHeight в javascript, чтобы найти высоту div.Если высота превышает допустимую, вы должны установить div на display:block.Это означает, что вы можете установить все содержащиеся в нем div-элементы на одинаковую высоту, при этом ценовой тег div будет прикреплен к основанию с помощью позиционирования.

Извините, у меня нет конкретного кода для вас.Я мог бы собрать их в ближайшее время.Но это должно указать вам правильное направление.

Answer 3

Может быть, для содержимого div установлено значение position: relative, а затем для цены установлено значение position: absolute; bottom:0?Таким образом, независимо от того, сколько текста в этом поле, цена всегда равна 0 (или любому другому числу, которое вы установили).

Вот простой пример: http://jsfiddle.net/PFwJ6/1/