代码之家 › 专栏 › 技术社区 › detly

在浮动内换行

css-float xhtml css

detly · 技术社区 · 14 年前

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

如果有更好的方法来创建一个带有标题的图像,我会把它放在代码的任何改进之上。如果失败了,我怎样才能让float中的文本换行呢?

我试图搜索这个,但只能得到围绕一个浮动,而不是在里面包装文本的结果。

补充: 我不希望为float设置显式宽度,因为我必须为我使用过的每一个图像设置显式宽度。

完整的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>

2 回复 | 直到 14 年前

Ryan Brunner 14 年前

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

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;

VoteyDisciple 14 年前

浮动元素和任何其他块元素一样,将占用尽可能多的宽度,以使其内容达到100%。

如果你想让它比100%窄,那就给它一个 width: ____;

推荐文章

Luis Pavez · 在actionListener完成之前更新组件

6 年前

mike · 使用类似封送处理的编码器操纵HTML

6 年前

ajaysheoran2323 · 如何使网站多语言[关闭]

7 年前

Hanlei Price · 标记验证

7 年前

Irum · 获取错误:UI指令无法强制转换到组织。素数面。模型菜单菜单元素

7 年前

curiousToKnow · 如何从xhtml获取文本

7 年前

zinon · XHTML渲染生成空pdf文件

7 年前

saurabh · 如何在一个页面中使用多个ajax日历

7 年前

Gabriel Cardoso · 更新数据后在datatable中更新

7 年前

mac wac · AngularJS的内联模板不适用于XHTML

8 年前