0

画像のサイズに関係なく、画像の下に一連のテキストを配置するための最良の方法は何ですか?

たとえば、次の画像には、最初の画像セットと 2 番目の画像セットがあります。

http://imgur.com/uNGvMd7

画像の最初のセット、フォント テキストは画像の下にありますが、これは画像の高さに依存します。

2 番目のセットは、どのように表示したいかです。画像の高さに関係なく、フォント テキストは常にすべての画像で同じ場所にあります。

これは、画像の高さと位置を決定するために JS スクリプトが必要な場所でしょうか?

前もって感謝します。

4

2 に答える 2

4

これを行う最善の方法は、div と CSS を使用してテーブル レイアウトをエミュレートすることです。

これは絶対的な高さを持たなくても機能します。

このデモを参照してください。

HTML:

<div class="container">
    <div class="row">
        <div class="cell">
            <img src="http://dummyimage.com/200x300/000/fff" />
        </div>
        <div class="cell">
            <img src="http://dummyimage.com/200x200/000/fff" />
        </div>
        <div class="cell">
            <img src="http://dummyimage.com/200x100/000/fff" />
        </div>
    </div>
    <div class="row">
        <div class="cell">
            Text
        </div>
        <div class="cell">
            Text
        </div>
        <div class="cell">
            Text
        </div>
    </div>
</div>

CSS:

.table {
    display: table;
}

.row {
    display: table-row;
}

.cell {
    display: table-cell;
    padding: 0 5px 10px;
    text-align: center;
}

.cell img {
    vertical-align: top;
}

編集:display:table IE の互換性と応答性に関するレイアウトにはいくつかの注意事項があります。ポールのコメントを参照してください。

于 2013-08-05T17:06:47.353 に答える
0

さまざまな画像の最大高さがわかっている場合は、それぞれを同じサイズのブロックで囲み、その下にキャプションを付けることができます。これにより、一貫した幅も可能になります。

HTML:

<figure>
  <div class="imgwrap">
    <img src="http://placekitten.com/100/100" />
  </div>
  <figcaption>one</figcaption>
</figure>
<figure>
  <div class="imgwrap">
    <img src="http://placekitten.com/100/75" />
  </div>
  <figcaption>two</figcaption>
</figure>
<figure>
  <div class="imgwrap">
    <img src="http://placekitten.com/50/50" />
  </div>
  <figcaption>three</figcaption>
</figure>

CSS:

figure {
  display: inline-block;
}

.imgwrap {
  height: 100px;
  width: 100px;
}

figcaption {
  text-align: center;
}

実際の例: http://codepen.io/paulroub/pen/auLcA

于 2013-08-05T17:07:35.653 に答える