1

ブートストラップCSSフレームワークを使い始めました。基本的に画像の周りにフレームを描画し、リストアイテム、アンカー、および画像で構成される画像ギャラリーを構築するためのクラスがあります。画像のサイズが異なると、ギャラリーの見栄えが悪くなります。私のアイデアは、サムネイルごとに固定の幅と高さを設定し、画像を境界線の中央に配置することでした。それはどういうわけか機能しません。タンブネイルは常にフレームの上部に取り付けられています。

<ul class="thumbnails" id="ulthumbs">
<li>
    <a class="thumbnail" style="width:120px; height:120px; line-height:120px;" >
        <img src="http://placehold.it/350x150" style="width:120px; height:84px; vertical-align:middle">
    </a>
</li>
</ul>

アイデア？

最高、ベルンハルト

4

2 に答える 2

2

テーブルを使用する以外に、Javascriptを使用せずに高さが不明なアイテムを垂直方向に整列させるクロスブラウザの方法はありません。

jQuery垂直整列プラグイン

あなたの場合、リストアイテムに固定の高さを与え、プラグインを使用してアンカーを整列させます（これはブロックレベルの要素として設定する必要があります）。

于 2012-06-07T01:15:48.300 に答える
1

JSを使用しない別の解決策は、リストアイテムとアンカーの幅と高さを設定し、画像をアンカーの背景として位置50％50％に設定することです。

このようにして、画像がホルダーよりも大きい場合、トリミングされるか、境界線付きで表示されます。

それが誰かが同様の解決策を探しているのを助けることを願っています。

于 2012-12-11T20:55:57.717 に答える