gpt4 book ai didi

css - 如何将文本环绕在 figcaption 周围

转载 作者:太空宇宙 更新时间:2023-11-04 09:25:32 27 4
gpt4 key购买 nike

使用float,我可以让文本环绕figure标签中的图像,而不是环绕figcaption标签,因为出色地。将 float 添加到 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

最佳答案

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

关于css - 如何将文本环绕在 figcaption 周围,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41129268/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com