确保具有未知内容长度的水平对齐DIV的类似块高度

Question

在网站上，我想展示以下结构的产品：

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

导致产品展示，例如：

现在，问题在于展示了多个产品，就像这个产品一样，但有时它们彼此相邻排列。

问题在于我想让价格出现在所有街区的同一位置（垂直方向）。当然，我首先只看到一个解决方案 - 溢出：隐藏在详细文本/功能列表中。但那时我最终会切断内容，对吗？

另一个问题是还应该有更多＆gt;＆gt;如果UL / LI列表超过4个条目，则显示按钮（扩展器）。就像这样：

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

我很欣赏这里有任何建设性的意见。

谢谢！

Answer 1

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

令人遗憾的是，它可以在Chrome，Opera和IE 9中运行，但完全打破了Firefox的管理：0和负边距似乎有问题（在此帖后向Bugzilla添加了issue #709014）。解决方案是检测此浏览器并将宽度设置为1px ...

它会产生一个小错误，因为当您调整大小时，有一个像素，其中价格会变形到下一行而不是块，但结果却不那么明显：

---

<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

也许将包含div设置为position: relative，然后将价格设置为position: absolute; bottom:0？这样，无论盒子里有多少文字，价格总是为0（或你设定的任何数字）。

这是一个基本的例子：http://jsfiddle.net/PFwJ6/1/

Answer 3

您可能希望使用javascript查找高度并显示“点击以查看更多链接”。

首先，在价格div上创建一个div，其中包含“点击查看更多”链接并将其设置为display:none。然后，您可以在javascript中使用offsetHeight来查找div的高度。如果高度超过可接受的高度，则将div设置为display:block。这意味着您可以将所有包含的div设置为相同的高度，并使用定位将价格div固定到底部。

对不起，我没有具体代码给你。我或许可以尽快把它们放在一起。但这应该指向正确的方向。