确保水平排列的DIV的类似的块高度与未知内容长度

在一个网站我想显示产品中的结构如下：确保水平排列的DIV的类似的块高度与未知内容长度

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

在产品中显示所得如：

现在，事情是有多种产品展出，就像这样，但有时它们彼此相邻。

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

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

我认为这通过很多时候，但我似乎没有找到妥善的解决办法。对于其中一个我永远不会知道LI是否会多行，因为内容可能更长或更短 - 并且我无法计算此服务器端，因为字体宽度/高度可能会有所不同。

我很感谢这里的任何建设性意见。

谢谢！

来源

2011-12-08 SquareCat

只要你有，你可以使用一个固定的宽度inline-block混合切缘阴性：http://jsfiddle.net/bymaK/11/

enter image description here

可悲的是，它在Chrome，Opera和IE 9，但彻底打破Firefox浏览器它的管理与：0和负边缘似乎越野车（添加issue #709014 Bugzilla下面这篇文章）。解决的办法是检测这个浏览器，并为它设置宽度为1px ...

它创建一个小的错误，当你调整存在1个像素，其价格扭曲到下一行，但不是块，但它的很多不太显眼作为结果，否则：

enter image description here

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

来源

2011-12-08 23:01:29

这是一个非常有趣的方法。我认为我不能应用它，但它确实很好。我认为这是解决这个问题最合适的解决方案。 – SquareCat

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

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

来源

2011-12-08 18:37:17 motoxer4533

但是在这种情况下，如果我有4个这样的产品显示器水平对齐排列，价格仍然不会被放置在相同的垂直位置，对吗？ – SquareCat

它应该仍然工作。检查我的帖子上面的例子。 – motoxer4533

谢谢你。问题是，如果内容更长，我会再次得到不同的位置，因为外块高度会增加。见[http://jsfiddle.net/GHnb5/](http://jsfiddle.net/GHnb5/） – SquareCat

你可能想使用JavaScript来找到高度并显示“点击查看更多链接”。

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

对不起，我没有具体的代码给你。我可能很快就能把一些东西放在一起。但是这应该指向正确的方向。

来源

2011-12-08 22:22:11

确保水平排列的DIV的类似的块高度与未知内容长度

回答

相关问题