4

次のようなドキュメントを考えてみましょう:

<DOCTYPE html>
<html><head><title>test</title></head>
<body>
<div>
<img src="..." alt="" style="clear:both" />
<p>Lorem ipsum...</p>
</body></html>

画像 (私の場合、実際にはアドホックに生成された埋め込まれた SVG です) のサイズは事前にわかりません。囲んでいる div の幅が画像を保持するのに十分な大きさである (つまり、下の段落が上の画像と同じ幅で分割される) 可能性はありますか?

これはこの質問のフォローアップです。私が現在取り組んでいるコードは、ここにあります。ボードの上のテキストは、ボードと同じ幅にする必要があります。

4

2 に答える 2

3

This can be accomplished using display:table and a set minimal width. I used width:1px in the sample below, but any minimal width would work.

HTML:

<div>
    <img src="..." alt="" />
    <p>Lorem ipsum...</p>
</div>

CSS:

div {
    width: 1px;
    display: table;
}

The result will look something like this:

enter image description here

JS Fiddle Example

于 2013-02-17T19:12:20.610 に答える
1

float を使用してコンテナに合わせることができます

<div style="float:left;background:yellow;">
    <img ...>
    <p>...</p>
</div>

または試すことができます（IE7では動作しません...しかし、おそらく修正できます）

<div style="display:inline;display:inline-block;background:yellow;">
    <img ...>
    <p>...</p>
</div>

新しい mozilla および webkit ブラウザーには、

<div style="width:fit-content;margin:0 auto;background:yellow;">
   <img ...>
    <p>...</p>
</div>

あなたのSVGで何が起こるかわかりませんが、<svg>宣言では、ベクターの実際のレンダリングサイズをAFAIKで指定できます

役立つことを願って..

于 2013-02-17T19:09:14.277 に答える