Question

我想显示下面带有标题的浮动图像。但是使用下面的代码，标题文本不会换行，这意味着浮动的带有标题的图像会占用一个huuuuuge的水平空间。

如果有一个更好的方法来获得带有标题的图像，我会考虑对此代码的任何改进。如果做不到这一点，我如何才能将浮动内的文本包装好？

我试图搜索这个，但只能获得将文本包装在浮动内而不是内部的结果。

已添加：我不想为浮点数设置明确的宽度，因为我必须为我使用过的每一张图片都这样做。

完整的XHTML ......

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">

<head>
<title>Test</title>

<style type="text/css">

p.img-with-cap {
    float: left;
}

</style>


</head>

<body>

<p class="img-with-cap">
<a class="img" href="http://sohowww.nascom.nasa.gov/">
<img alt="Sun" src="http://www.heeris.id.au/sites/default/files/sun.gif" width="256" height="256" />
</a>
<br />The Sun - a sinister and destructive force. Image from
<a href="http://sohowww.nascom.nasa.gov/">SOHO website</a>.
</p>

<p style="font-size: 200%">The Sun is a star located at the centre of our solar system. It is
classified as a G2 star, has a mass of about 2×1030 kg, a temperature of
5800 K at the surface and a core temperature of 15.6 million Kelvin. It
constantly emits electromagnetic radiation over the entire spectrum
(indeed, it can be modelled as a black body), peaked at the wavelength
corresponding to that of green light.</p>

</body>

</html>

Answer 1

块级浮动元素可以应用宽度。我认为以下样式应该阻止包装：

p.img-with-cap {
    float: left;
    width: 200px; /* or whatever */
}

如果您不想要特定的宽度，但希望它与图像的宽度相匹配，您可以在窗口加载时动态设置宽度，如下所示：

function setWidth() {
    var width = document.getElementById("imgElement").width;
    document.getElementById("wrapperElement").style.width = width;
}

window.onload = setWidth;

Answer 2

浮动元素，就像任何其他块元素一样，将占用尽可能多的宽度以适应其内容 - 高达100％。

如果您希望它比100％更窄，请给它一个width: ____;属性。

在float中包装文本

2 个答案: