figcaptionの周りにテキストを囲む方法

floatと入力すると、figureタグの画像を囲むようにテキストを取得できますが、figcaptionタグの周囲は囲まないようにすることができます。 floatをfigcaptionに追加することはできません。何かアドバイス？figcaptionの周りにテキストを囲む方法

以下のコードはここにある：https://jsfiddle.net/ujb6bwjq/

私に役立つ

<html><head><style> 
body { width: 200px; } 
figure { 
     width: 100px;height: 100px;padding: 0px;margin: 10px; 
     float:left; 
     } 
figcaption { font-size: 9pt; } 
</style></head> 
<body> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at ante. Mauris eleifend, quam a vulputate dictum, massa quam dapibus leo, eget vulputate orci purus ut lorem.</p> 
     <figure>   
       <svg width="100px" height="100px"><polygon points="0,0 100,0 100,100 0,0" /></svg> 
       <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at ante. Mauris eleifend, quam a vulputate dictum, massa quam dapibus leo, eget vulputate orci purus ut lorem.</figcaption> 
     </figure> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at ante. Mauris eleifend, quam a vulputate dictum, massa quam dapibus leo, eget vulputate orci purus ut lorem.</p> 
</body></html>

関連ではない：HTML5 wrap text around image with caption

出典

2016-12-13 enfascination

このような意味ですか？ https://jsfiddle.net/ujb6bwjq/1/または、figcaptionをsvg要素と並べて表示しますか？ – TylerH

いいえ、そうではありません。私はイメージの下の左にイラストを描いていますが、テキストは両方を囲んでいます。たぶんあなたは別の何かを見ているかもしれませんが、私はsvgとfigcaptionの両方が浮動小数点の同じ

タグに入っていても、テキストがsvgを囲んでいますが、figcaptionと衝突していることがわかります： – enfascination

... OH違う。表示：テーブルプラス浮動小数点：左しました。私はディスプレイを試してみましたが、ブロックとインラインで、テーブルではありません。それはそれをしました。ありがとう。 – enfascination

は、あなたが何を意味するのか理解することは私にしばらく時間がかかったが、最も簡単な解決策は、氏リスターが言ったことです。削除しますあなたのfigure CSSセレクタからheightプロパティ：

body { 
 
    width: 200px; 
 
} 
 
figure { 
 
    width: 100px; 
 
    padding: 0px; 
 
    margin: 10px; 
 
    float: left; 
 
} 
 
figcaption { 
 
    font-size: 9pt; 
 
}

<body> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at ante. Mauris eleifend, quam a vulputate dictum, massa quam dapibus leo, eget vulputate orci purus ut lorem.</p> 
 
    <figure> 
 
     <svg width="100px" height="100px"> 
 
      <polygon points="0,0 100,0 100,100 0,0" /> 
 
     </svg> 
 
     <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at ante. Mauris eleifend, quam a vulputate dictum, massa quam dapibus leo, eget vulputate orci purus ut lorem.</figcaption> 
 
    </figure> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at ante. Mauris eleifend, quam a vulputate dictum, massa quam dapibus leo, eget vulputate orci purus ut lorem.</p> 
 
</body>

あなたはそこで、明示的なheight: 100px;を維持する必要がある場合は、display: table;を追加することがあなたにも同じ結果が得られます。

出典

2016-12-13 19:58:45 TylerH

ええ、はい、私は属性ではなく属性を意味していました。混乱させて申し訳ありません。 –

@MrListerいいえ心配ありません。私はあなたが何を意味するのか分かっていた！それはちょっと混乱していた質問の説明でした。 – TylerH

figcaptionの周りにテキストを囲む方法

答えて

関連する問題