使用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>
答案 0 :(得分:1)
我花了一些时间来理解你的意思,但最简单的解决方案是Lister先生所说的:从你的height
CSS选择器中移除figure
属性:
body {
width: 200px;
}
figure {
width: 100px;
padding: 0px;
margin: 10px;
float: left;
}
figcaption {
font-size: 9pt;
}
&#13;
<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>
&#13;
如果你必须在其中保留明确的height: 100px;
,那么添加display: table;
会给你相同的结果。