-1

2行1列のテーブルを持つWebページがあります。最初の行には動的な画像が表示され、2番目の行には画像に関連するキャプションが表示されます。

歪みのない状態で画像を表示したいので、そのための高さと幅は指定していません。

これで、キャプションテキストの長さが長い場合、行幅は画像の行幅よりも大きくなります。私が欲しいのは、行幅を増やさずにキャプションを複数行で表示したいということです。そのため、画像とそのキャプション行の幅は同じです。

これに対する解決策はありますか....私はHTMLを初めて使用し、この問題の解決策を見つけることができません。

4

3 に答える 3

1

これは実際には私が行う方法ではありませんが、ええと...

行のサイズがわかっている場合は、テーブルの行にスタイルを追加してみてください...

<tr style="height:300px" ...

そうすれば、両方とも同じ高さになります。しかし、動的にしたい場合、私が考える唯一の方法は、JavaScript を使用して画像の高さを計算し、テーブルの行のスタイルを適切に調整することです。jQueryを使用すると、次のようなことができます...

var img_height = $('table img').height();
$('table tr').height(img_height);

(これはテーブルが 1 つしかなく、その中に img が 1 つある場合です。必要に応じてこのコードを調整する必要がある場合があります。これは単なる例です!)

編集：キャプションが画像よりも大きくなる可能性がある場合...

まず、キャプション行に のクラスを指定captionし、画像行に のクラスをimage指定してから、次の jQuery コードを使用します。

var img_height = $('.image').height();
var caption_height = $('.caption:first').height();

if (img_height > caption_height) {
    $('.caption').height(img_height);
} else {
    $('.image').height(caption_height);
}

jQuery コードの使用方法については、次の説明をお読みください: http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery

于 2012-12-19T13:25:01.853 に答える
0

これを試して：

<table>
  <tr><td> ...image goes here...</td></tr>
  <tr><td style="width:1px">
    Caption!      
  </td></tr>
 </table>
于 2012-12-19T13:32:50.100 に答える
0

これを使用して、テーブルに動的画像のピクセルまたは幅を固定します。これは役に立ちます。この mmmmmmmm のように、空白のない単語をキャプションにしないでください。自動的に複数行になります

<table>
  <tr><td> ...image goes here...</td></tr>
  <tr><td style="width:1px">
    Caption!      
  </td></tr>
 </table>
于 2012-12-19T14:58:51.360 に答える