将文本限制为CSS中兄弟图像/自动宽度的宽度

Question

我本质上是在尝试创建一个"figure"元素的版本(即将出现在HTML5中),我在其下面有一个简短描述的图像.

但是,我想将整个元素的宽度限制为图像的宽度,因此文本不会比图像宽(如果需要,可以包装到多行).

基本HTML:

<div class="figure">
<img src="..." alt="..." width="..." height="..." /><br />
A description for the image
</div>

我精通使用CSS,但我想不出任何纯CSS解决方案,而无需添加style="width:100px"到div相匹配的图像宽度.

更新:经过一番搜索和思考,最好的方法似乎是在div上使用内联宽度.我会在图像上保留width属性,以防我希望div比图像宽一点(例如为了容纳更长的标题).

这种方法也意味着我可以将两个图像并排放在下面的标题中.如果我有一组相同大小的图像,我当然可以为每个图像添加一个额外的样式div.

感谢所有回答的人!

Answer 1

这也可以使用'display: table-caption'标题来完成,如下所示:

<div class="wrapper">
  <img src="image.jpg" />
  <div class="caption">My caption...</div>
</div>

.wrapper {
  display: table;
}

.caption {
  display: table-caption;
  caption-side: bottom;
}

此块也可以浮动在其他文本的右侧.我在IE8 +中测试了这个.这是一个JSBin示例:http://jsbin.com/xiyevovelixu/1

Answer 2

要自动设置宽度以匹配图像,您可以使用

.figure {
  display: table;
  width: 1px;
}

这使得div的行为类似于表(在Internet Explorer中不受支持).或者您可以使用表而不是div.我认为没有其他方法可以自动设置宽度.

编辑:最简单的方法是忘记自动宽度并手动设置.如果确实需要,您可以使用JavaScript或表格.在这种情况下,使用表并不是那么难看,因为您正在解决HTML版本的限制.在服务器端脚本的情况下,您还可以在生成页面时设置宽度.

Answer 3

样式表

div.figure img,
div.figure div.caption {
    width: 100%;
}
div.figure div {
    overflow: hidden;
    white-space: nowrap;
}

注意：要启用换行，只需删除最后一个 css 行

超文本标记语言

<div class="figure" style="width:150px;">
    <img src="logo.png" alt="logo" />
    <div class="caption">A description for the image</div>
</div>

我在 Chrome、Firefox 和 IE7 中检查过它，在这三个浏览器中看起来都不错。我意识到这有 div 的宽度而不是 img 的宽度，但至少你只需要在一处设置宽度。由于缺少使用 css 表达式（仅限 IE），我看不到将外部 div 宽度设置为第一个子元素宽度的方法。