将标题缩小为图像尺寸

Question

有没有什么办法可以告诉我的span在增加其父母的尺寸div之前进行换行？

我样机：http://jsfiddle.net/e52pZ/4/

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

---

我接受Bart的jQuery临时答案。如果任何人都能弄清楚“纯粹的”HTML + CSS解决方案，那么我们都很乐意看到它。

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

一“显示器：表格单元格”的属性似乎得到了更接近的小小。然而，那些比我更了解我的人需要更多的工作。

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，就像我在我的笔中一样。