logo标签列表

CSS：强制文本换行（或仅由其子元素定义元素宽度）

htmlcssimage
5

嗯，这对我来说有点奇怪。这是我正在使用的HTML元素：

LOLZ http://www.ubuntu-pics.de/bild/14571/screenshot_030_0O2o3D.png

一张带标题的照片。理想情况下，我希望通过纯CSS使它看起来像这样：

alt text http://www.ubuntu-pics.de/bild/14572/screenshot_031_mp84u7.png

图像父元素的宽度需要取决于图像的大小。

我可以随意更改标记。 （文本当前不在自己的div中，但如果需要，它可以在其中。）在CSS中是否有任何方法可以实现此目的？ 我的印象是，我需要“强制”文本尽可能换行（这似乎是不可实现的），或者使整个元素的宽度仅取决于一个元素并忽略其他元素（我以前从未听说过）。

真的有方法吗？ 还是我需要使用神奇的Javascript？（JS解决方案非常简单，但相当糟糕...）

6个回答
3

请查看这篇关于处理带标题图片的最佳方法的精彩文章。

个人认为，在这种情况下，你必须咬紧牙关，采取可行的方法。

0
这里有一个解决方案，尽管它可以产生您要求的布局，但很可能并不适用于您。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<style>
div.a {float: left;
        position:relative;}

div.b {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        text-align: center;
        background-color:gray;}

</style>
</head>

<body>

<div class="a">
<img src="http://stackoverflow.com/content/img/so/logo.png" alt="">
<div class="b">Caption text Caption text Caption text Caption text Caption text </div>
</div>

</body>
</html>

如果您在 div a 下方放置一些内容，您会发现它不理想的原因。它将与标题重叠，因为绝对定位的标题没有垂直地延伸父 div。如果您仍然有足够的白色空间或愿意保留它，它可能仍然适用于您。

0
将容器设置为table-layout:fixed的表格，并将图像放在顶行。您还可以使用纯CSS使用display:table-*属性（以及IE7-js库用于IE6兼容性）来实现此目的。
table-layout:fixed的作用是使表绘制算法一旦知道该列中第一个单元格的宽度，就锁定每个表列的宽度。标题将无处可扩展，因此它将换行到图像的宽度（第一个单元格）。
尝试您所描述的内容，一定是做错了什么。 <table border="1" style="table-layout: fixed;"> <tr><td>hello world</td></tr> <tr><td>hi there guys how are you?</td></tr> </table> 作为示例代码似乎呈现出我通常看到的表格 - 由其最宽的列设置。还需要定义其他内容吗？ - Matchu
似乎当表格宽度为自动时，table-layout:fixed会失败。不过我想出了一个更好的解决方案，可以正常工作（请参见我的其他答案）。 - SpliFF
0

table的答案是可行的。很容易。我不能鼓励使用它，但易用性确实有其优点。我原本想建议使用clip:CSS属性，但我无法在我的本地机器上使其工作（出于某种原因，尽管它在example上完美呈现了cssplay.co.uk）。

这样做的缺点是，它可能只适用于为容器定义固定宽度的情况。不过我相信一定有办法。我会继续寻找。

0

好的，看起来我无法找到简单的解决方案。感谢你帮我解决这个问题 :)

我认为，考虑到我将如何存储这些图像，访问宽度不会涉及到常量重新计算。我可能会使用服务器端的魔法来解决。

谢谢！

0

我想出了一个可行且相当简洁的解决方案。

该解决方案使用表格（或 div，如果您喜欢，则使用 display:table）并添加第二列来“推”第一个单元格到它实际需要的最小空间。可以将表格设置为 1px 宽度以防止其跨越页面增长。我已经制作了一个演示来展示这个过程：

http://test.dev.arc.net.au/caption-layout.html

已在IE8、Firefox和Safari/Win中测试并工作正常

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接