1

画像ギャラリーを作成していますが、問題が発生しました。画像ラベルがすべて同じ長さの場合、それらは完全に整列しますが、ラベルが1行より長い場合、下に空白を作成するのではなく、画像を押し上げます。どうすればこれを修正できますか？

画像をすべて1行に揃え、テキストをそこから下に揃えたいと思います。

これをjsfiddleに入れてみましたが、なんらかの理由で動作させることができません...これを作成するHTMLは次のとおりです。

<div class="thumbrow">
    <div style="min-width:400px;" class="thumbrow">
        <div style="width:100px;" class="thumbs">
            <div style="width:100px;" class="imgbox">
                <a target="_blank" title="Hydrangeas" rel="lightbox[test]" href="http://jacobraccuia.com/test/wp-content/uploads/gallery/test/Hydrangeas.jpg">
                    <img width="100" height="75" src="http://jacobraccuia.com/test/wp-content/uploads/gallery/test/thumbs/Hydrangeas.jpg">
                </a>
            </div>
            <p>Hydrangeas</p>
        </div>
        <div style="width:100px;" class="thumbs">
            <div style="width:100px;" class="imgbox">
                <a target="_blank" title="Chrysanthemum" rel="lightbox[test]" href="http://jacobraccuia.com/test/wp-content/uploads/gallery/test/Chrysanthemum.jpg">
                    <img width="100" height="75" src="http://jacobraccuia.com/test/wp-content/uploads/gallery/test/thumbs/Chrysanthemum.jpg">
                </a>
            </div>
            <p>Chrysanthemum</p>
       </div>
       <div style="width:100px;" class="thumbs">
            <div style="width:100px;" class="imgbox">
                <a target="_blank" title="Lighthouse" rel="lightbox[test]" href="http://jacobraccuia.com/test/wp-content/uploads/gallery/test/Lighthouse.jpg">
                    <img width="100" height="75" src="http://jacobraccuia.com/test/wp-content/uploads/gallery/test/thumbs/Lighthouse.jpg">
                </a>
            </div>
            <p>Lighthouse</p>
        </div>
    </div>
</div>

とCSS

.thumbgal .thumbs {
    float: left;
    margin: 0 5px;
}
.imgbox {
    position: relative;
    text-align: center;
}   
.thumbrow {
    float: left;
    overflow: hidden;
}
.thumbs p {
    font-size: 12px;
    line-height: 16px;
    word-wrap: break-word;
}

助けてください：D

ここに画像の説明を入力してください

4

3 に答える 3

0

.thumbs こんにちは、チェック デモにスタイルを追加するのが間違っていると思います

.thumbs {
    float:left;
    margin-right:10px;
}
于 2013-03-07T02:30:07.633 に答える
0

thumbsdiv のdisplay値を に設定しinline-block、垂直方向に上に揃えます。

.thumbs {
  margin: 0 5px;
  display:-moz-inline-stack;
  display: inline-block;
  vertical-align: top;
}

ここでフィドル。

于 2013-03-07T02:42:38.070 に答える
0

画像のテキスト全体を表示する必要がない場合、問題を簡単に解決するには、テキストを特定の幅でキャップし、オーバーフローする場合は省略記号を追加します。

これは、単語を折り返す代わりに、ラベルの高さを 1 行に保ちます。

.thumbs p {
  font-size: 12px;
  line-height: 16px;
  width: 100px; /* Some width */
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

編集：与えられたコードから、よく見てください。私はそれをフィドルで試してみましたが、うまくいきました。にフロートとマージンを追加しただけ.thumbsです。http://jsfiddle.net/nKkWX/

于 2013-03-07T02:01:47.607 に答える