確保水平排列的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的類似的塊高度與未知內容長度

回答

相關問題