Question

好的，这对我来说很奇怪。这是我正在使用的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解决方案相当简单，但相当蹩脚......）

Answer 1

查看此great article有关处理带图片标题的最佳方法。

就个人而言，这是其中一种情况，你必须把它吸干然后继续下去。

Answer 2

使容器成为具有表格布局的表格：固定并将图像放在顶行。您也可以使用display：table- *属性（以及IE7兼容的IE7-js库）使用纯CSS执行此操作。

table-layout：fixed的作用是使表绘制算法在知道该列中第一个单元格的宽度后锁定每个表列的宽度。标题将无处扩展到所以它将包裹到图像的宽度（第一个单元格）。

Answer 3

table答案可行。容易。我不能鼓励使用它，但易用性确实有用。我打算建议使用clip: CSS属性，但我不能让它在我的本地机器上工作（出于某种原因，尽管它在example完全呈现cssplay.co.uk）

这样做的缺点是它可能仅在为容器定义固定宽度时才有效。不过，我肯定必须有办法。我会继续寻找。

Answer 4

好吧，看起来没有简单的解决方案可以解决。谢谢你帮我解决了这个问题：）

我认为，鉴于我将如何存储这些图像，访问宽度不会涉及不断重新计算。我可能只是使用那个服务器端魔术。

谢谢！

Answer 5

这是一个可能对你不起作用的解决方案，即使它确实产生了你所要求的布局：

<!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。如果你有足够的空白空间或者你愿意保留它，它仍然适用于你。

Answer 6

我想出了一个工作且相当干净的解决方案。

解决方案使用一个表（或div，如果你愿意，还有display：table），并添加第二列，将第一个单元“推”到它真正需要的最小空间。该表可以设置为1px宽度，以阻止它在整个页面上增长。我已经整理了一个演示来展示这个：

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

在IE8，Firefox和Safari / Win中进行测试和工作

CSS：强制文本换行（或者只用其中一个子元素定义元素宽度）

6 个答案: