テキストを兄弟画像の幅/ CSSの自動幅に制限する

StackOverflow https://stackoverflow.com/questions/617386

  •  03-07-2019
  •  | 
  •  

質問

基本的に＆quot; figure＆quot;のバージョンを作成しようとしています。要素（HTML5で予定）、その下に短い説明のある画像があります。

ただし、この要素全体の幅を画像の幅に制限するため、テキストは画像よりも広くなりません（必要に応じて複数行に折り返します）。

基本的なHTML：

<div class="figure">
<img src="..." alt="..." width="..." height="..." /><br />
A description for the image
</div>

私はCSSに精通していますが、 style =＆quot; width：100px＆quot; を div 画像の幅に合わせます。

更新：少し検索して考えた後、最良の方法はdivでインライン幅を使用することです。 divを画像より少し広くしたい場合（たとえば、長いキャプションに対応するため）、画像のwidth属性を保持します。

このアプローチでは、2つの画像とキャプションを並べて表示することもできます。同じサイズの画像セットがある場合、もちろん各 div に追加のスタイルを追加できます。

回答いただいた皆様に感謝します！

役に立ちましたか？

解決

スタイルシート 

div.figure img,
div.figure div.caption {
    width: 100%;
}
div.figure div {
    overflow: hidden;
    white-space: nowrap;
}

注：ラッピングを有効にするには、最後のcss行を削除するだけです

HTML 

<div class="figure" style="width:150px;">
    <img src="logo.png" alt="logo" />
    <div class="caption">A description for the image</div>
</div>

Chrome、Firefox、IE7で確認しましたが、3つとも見栄えが良いです。これにはdivではなくimgの幅がありますが、少なくとも1か所で幅を設定する必要があるだけです。 css-expressions（IEのみ）を使用しない場合、外側のdivの幅を最初の子要素の幅に設定する方法がわかりません。

他のヒント

これは、次のように、キャプションに 'display：table-caption' を使用して実行することもできます。

HTML 

<div class="wrapper">
  <img src="image.jpg" />
  <div class="caption">My caption...</div>
</div>

スタイルシート

.wrapper {
  display: table;
}

.caption {
  display: table-caption;
  caption-side: bottom;
}

このブロックは、他のテキストの左右にフローティングすることもできます。 IE8 +でこれをテストしました。 JSBinの例を次に示します。 http://jsbin.com/xiyevovelixu/1

自動的に画像に一致するように幅を設定するために使用できます

.figure {
  display: table;
  width: 1px;
}

これにより、divはテーブルのように動作します（Internet Explorerではサポートされていません）。または、divの代わりにテーブルを使用できます。幅を自動的に設定する別の方法はないと思います。

編集：最も簡単な方法は、自動幅を忘れて手動で設定することです。本当に必要な場合は、JavaScriptまたはテーブルを使用できます。この場合、HTMLバージョンの制限に対処しているため、テーブルの使用はそれほど見苦しくありません。サーバー側のスクリプトの場合、ページを生成するときに幅を設定することもできます。

同じ問題があり、これを読んで決定しました周囲の要素でインラインスタイルを使用します。テーブルを使用するよりも優れたソリューションのようです。

他のすべてのブラウザに display：table ソリューションを使用し、 CSSの動作。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top