0

いくつかの外部画像をページにロードする小さなPerlスクリプトがあります。画像リンク（そのうちの50個）​​はすべて配列内にあり、画面にダンプするために繰り返し処理します。私はPerlがかなり得意ですが、これまでWeb開発を行ったことがないので、CSSの完全な初心者です。HTMLテンプレートに次のコードがあります

[% FOREACH dvd IN dvd_chart %]

<div class="thumbnail">
<img  src="[% dvd.thumbnail %]" />
<br>
</div>

[% END %]

CSSは次のとおりです。

.thumbnail
{
float: left;
width: 120px;
border: 1px solid #999;
margin: 0 15px 15px 0;
padding: 5px;
}

編集：生成されたHTMLは次のようになります：

<div class="thumbnail">
<img  src="http://content9.flixster.com/movie/11/16/78/11167831_pro.jpg" />
<br>
Taken 2
</div>
<div class="thumbnail">
<img  src="http://content9.flixster.com/movie/11/16/86/11168615_pro.jpg" />
<br>
The Possession
</div>
<div class="thumbnail">
<img  src="http://content7.flixster.com/movie/11/16/80/11168037_pro.jpg" />
<br>
Won't Back Down
</div>
<div class="thumbnail">
<img  src="http://content9.flixster.com/movie/11/16/51/11165143_pro.jpg" />
<br>
To Rome with Love
</div

問題は、画像が完全に読み込まれ始め、最初の2行は問題ないが、1つの画像だけで数行になり、その後にさらに適切な行が続くことです。欠落しているURLはありません。誰かが何がうまくいかないのか、あるいは動的画像をdivにロードするための良いチュートリアルさえも提案できますか？

4

1 に答える 1

2

JS フィドルで HTML と CSS を調べたところ、映画のタイトルが長いアイテムの高さに問題があることがすぐにわかりました。「CSS gallery variable height」を Google ですばやく検索すると、次のチュートリアルが表示されます。

私はそれに従います。それ以外の場合は、すべてのギャラリー アイテムの高さを設定するか (最適な計画ではありません)、映画のタイトルの長さを制限する必要があります (これも良くありません)。

于 2013-03-23T15:30:35.070 に答える