1

現在、フロントエンドに Twitter Boostrap を使用しているサイトを開発しています。フロントページには、画像といくつかのテキストを含む 3 つのボックス (Twitter Boostrap 用語ではサムネイル ボックス) があります。ただし、問題は、画像の高さと説明テキストの量によって、これらのボックスの高さが異なる場合があることです。

私のマークアップは次のとおりです。

<ul class="thumbnails">
    <li class="span4">
        <div class="thumbnail">
            <img src="img/products/1.png" alt="">
            <h3>Thumbnail label</h3>
            <p>Thumbnail caption...</p>
        </div>
    </li>          
    <li class="span4">
        <div class="thumbnail">
            <img src="img/products/2.png" alt="">
            <h3>Thumbnail label</h3>
            <p>Thumbnail caption...</p>
        </div>
    </li>   
    <li class="span4">
        <div class="thumbnail">
            <img src="img/products/3.png" alt="">
            <h3>Thumbnail label</h3>
            <p>Thumbnail caption...</p>
        </div>
    </li>   
</ul>

私はこのプラグインを試して、次のようにインスタンス化しました:

<script>
    $().ready(function () {
        // Ensure equal heights on thumbnail boxes
        $('.thumbnail').equalHeights();
    });
</script>

効果なし:-/

私も次のことを試しました：

// Ensure equal heights on thumbnail boxes
$('.thumbnail').css({
    'height': $('.thumbnail').height()
});

ただし、サムネイルボックスを90px高さに設定します。

誰もこれに対する解決策を知っていますか?

前もって感謝します。

4

2 に答える 2

0

window.loadをドキュメント対応に変更します。少し速いです。

<script>
    $(function(){
        // Ensure equal heights on thumbnail boxes
        $('.thumbnail').equalHeights();
    });
</script>
于 2012-11-30T10:55:11.860 に答える
0

はい、CSS のみのソリューションがあります。

HTML:

<ul class="thumbnails">
<li class="span4 thumbnail">
        <img src="img/products/1.png" alt="">
        <h3>Thumbnail label</h3>
        <p>Thumbnail caption...<br/> with 2 lines</p>
    </div>
</li>          
<li class="span4 thumbnail">
        <img src="img/products/2.png" alt="">
        <h3>Thumbnail label</h3>
        <p>Thumbnail caption...<br/> with 2 lines</p>
    </div>
</li>   
<li class="span4 thumbnail">
        <img src="img/products/3.png" alt="">
        <h3>Thumbnail label</h3>
        <p>Thumbnail caption with 1 line...</p>
    </div>
</li>   
<li class="span4 thumbnail">
        <img src="img/products/3.png" alt="">
        <h3>Thumbnail label</h3>
        <p>Thumbnail caption...</p>
    </div>
</li>

CSS

.thumbnail:nth-child(3n+1) {
    clear: left;
}

(上記の例では、親指を 3 回押すたびに改行されます。すべてのブレークポイントで構成するだけで問題なく動作します。`

于 2014-08-05T19:57:55.840 に答える