html - 奇妙に見えるグリッド CSS

Question

キャプション付きの画像のグリッドを作成しようとしています。シンプルな CSS を使用してグリッドを作成しています。

CSS:

.float{float:left;padding:20;}
.float img{ width:80px; height:100px; padding:0;}
.float p {text-align:center; margin-top:0;width:100px;}

次に、すべてこの同じ形式を使用していくつかの div を出力します。

<div class="float">
<img src="noimage.jpeg"></img>
<p>Movie Title</p>
</div>

問題は、キャプション (この場合は映画のタイトル) が常に長く、複数の行にまたがることがあり、次のようなグリッドが表示されることです。

画像を一列に並べるために CSS で変更できるものはありますか?

score 2 · Accepted Answer

クラスで言及text-align:center; height:180px;する.float

.float{float:left;padding:20; text-align:center; height:180px;}

これで問題が解決すると思います。

score 0 · Accepted Answer

「.float p」のマージンを0に設定します

.float p {.float p {text-align:center; 幅:100px; マージン:0 0 0 0; }

score 0 · Accepted Answer

5 つの要素の各行を div でラップclearfixし、CSS に次のクラスを追加します。

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

4 に答える 4