如何将文本环绕在 figcaption 周围

Question

使用 float，我可以让文本环绕 figure 标签中的图像，但也不能环绕 figcaption 标签。将 float 添加到 figcaption 不会这样做。有什么建议吗？

<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

Answer 1

我花了一段时间才明白你的意思，但最简单的解决方案是李斯特先生所说的：从你的 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; 会得到相同的结果。

如何将文本环绕在 figcaption 周围

How to wrap text around figcaption

html

css

css-float