html - 确保内容长度未知的水平对齐 DIV 的 block 高度相似

Question

在网站上，我想按以下结构显示产品:

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

导致产品展示，例如:

现在，问题是有多种产品在展示，就像这个一样，但有时它们并排排列。

问题是我想让价格出现在所有 block 中的相同位置(垂直方向)。当然，一开始我只看到一个解决方案——溢出:隐藏在详细文本/功能列表中。但是我最终会切断内容，对吧？

另一个问题是，如果 UL/LI 列表超过 4 个条目，还应该出现一个更多>>按钮(扩展器)。就像这样:

我经常思考这个问题，但我似乎找不到合适的解决方案。一方面，我永远不知道 LI 是否是多行的，因为内容可能更长或更短 - 而且我无法计算这个服务器端，因为字体宽度/高度可能会有所不同。

如果您能在这里提出建设性意见，我将不胜感激。

谢谢!

Answer 1

只要你有一个固定的宽度，你就可以使用 inline-block 混合负边距:http://jsfiddle.net/bymaK/11/

可悲的是，它可以在 Chrome、Opera 和 IE 9 中运行，但完全破坏了 Firefox，因为它对 with:0 和负边距的管理似乎有问题(在这篇文章之后将 issue #709014 添加到 Bugzilla)。解决方案是检测这个浏览器并为它设置宽度为1px...

它会产生一个小错误，因为当您调整大小时有 1 个像素，价格会扭曲到下一行而不是 block ，但它的结果比其他情况要少得多:

---

<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);
    }); 
});