私は次のような構造の製品を表示したいウェブサイトでは、未知のコンテンツの長さ

Question

と水平に整列div要素の同様のブロックの高さを確保：

のような製品のディスプレイに結果の

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

：

ここでは、この製品と同じように複数の製品が表示されていることがありますが、時には相互に並べられることもあります。

問題は、私が価格をすべてのブロックで同じ位置（垂直方向）に見せたいということです。もちろん、私は最初のオーバーフローでは1つの解決策しか見ません：詳細テキスト/フィーチャーリストには隠されています。しかし、その後、コンテンツが途切れてしまいますね。

もう1つの問題は、UL/LIのリストが4つのエントリより長い場合に表示されるmore >>ボタン（エクスパンダ）が必要なことです。ただ、このように：

私はかなり頻繁に介してこれを思ったが、私は適切な解決策を見つけることないように見えます。フォントの幅や高さが変わる可能性があるため、コンテンツが長くても短くてもLIが複数行になるかどうかは分かりません。このサーバサイドを計算することはできません。

私は建設的な入力をここで感謝します。

ありがとうございました！

Answer 1

負のマージンと混合inline-block：http://jsfiddle.net/bymaK/11/

悲しいことは、それのようにFirefoxのクローム、オペラとIE 9で動作しますが、完全に壊れるということですそれは0の管理と負のマージンのバグです（この記事の後にBugzillaにissue #709014を追加）。解決策は、このブラウザを検出し、幅を1ピクセルに設定することです...

サイズを変更する場合、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; 
} 

 

Answer 2

position: relativeに設定した値をposition: absolute; bottom:0に設定している可能性がありますか？そうすれば、テキストはどれくらいの大きさであっても、価格は常に0（または設定した数）になります。ここで

は初歩的な例です：http://jsfiddle.net/PFwJ6/1/

Answer 3

あなたは高さを見つけて、「より多くのリンクを表示します」を表示するためにJavaScriptを使用したい場合があります。

まず、「詳細を見るにはクリックしてください」というリンクを含むdivを価格欄に作成し、display:noneに設定します。次に、div32の高さを見つけるためにjavascriptにoffsetHeightを使用することができます。高さが許容範囲を超えている場合は、divをdisplay:blockに設定します。つまり、ポジションを使用して価格divを下に固定して、すべてのdivを同じ高さに設定することができます。

ご迷惑をおかけしますが、具体的なコードはありません。私はすぐに一緒にいくつかをまとめることができるかもしれません。しかし、これはあなたを正しい方向に向けるべきです。限り、あなたはあなたが使用できる固定幅を持っているよう