缩小图片大小的标题

Question

有没有办法告诉我的span在增加其父div的尺寸之前换行？

我的模型：https://codepen.io/bukzor/pen/xzLYzj

彩色块是未定义大小的图像，白色块应该彼此相邻浮动。

Answer 1

如果不为每个div.shrink元素添加特定宽度，则无法执行此操作。

示例：http://jsfiddle.net/e52pZ/2/

如果IMG大小是完全未知的，并且总是不同的，你可以用jQuery做这样的事情：

$('.shrink').each(function(){
    var self = $(this);
    self.width(self.find('img').width())
});

示例：http://jsfiddle.net/e52pZ/7/

Answer 2

“display：table-cell”的属性似乎更接近 little 。但是，那些比我更了解的人需要做更多的工作。

http://jsfiddle.net/e52pZ/12/

Answer 3

我想我已经把这个想出来了。诀窍是使用display：table，并在标题上使用经常被遗忘的显示：table-caption。我在这里写了一支笔：http://codepen.io/jhereg00/pen/qEGzob

基本上就是这样：

<figure>
  <img>
  <figcaption></figcaption>
</figure>

与

figure {
  display: table;
  caption-side: bottom;
}
figcaption {
  display: table-caption;
}

或者，为了像你在小提琴中那样设置容器的样式，你需要添加另一个包装div，就像我在笔中那样。

Answer 4

在2018年，我们display:grid提供了一个优雅的解决方案。

figure {
  display: inline-grid;
  grid-template-columns: min-content;
  vertical-align: top;
}

https://codepen.io/bukzor/pen/qKXyKW