span
に親のサイズを増やす前にラップする方法はありますかdiv
?キャプションを画像のサイズに縮小
マイモックアップ:http://jsfiddle.net/e52pZ/4/
色のブロックは不定サイズの画像であり、白いブロックは互いに隣接してフローティングされるべきです。
私は暫定的にBartのjQueryの回答を受け付けています。誰かが "純粋な" HTML + CSSソリューションを見つけ出すことができれば、私たちはそれを見たいと思っています。
span
に親のサイズを増やす前にラップする方法はありますかdiv
?キャプションを画像のサイズに縮小
マイモックアップ:http://jsfiddle.net/e52pZ/4/
色のブロックは不定サイズの画像であり、白いブロックは互いに隣接してフローティングされるべきです。
私は暫定的にBartのjQueryの回答を受け付けています。誰かが "純粋な" HTML + CSSソリューションを見つけ出すことができれば、私たちはそれを見たいと思っています。
各div.shrink
要素に特定の幅を追加しないと、これを行うことはできません。
例:http://jsfiddle.net/e52pZ/2/
IMGサイズが完了不明である、と常に異なるものになります、あなたはjQueryを使って、このような何かを行うことができた場合:
$('.shrink').each(function(){
var self = $(this);
self.width(self.find('img').width())
});
A "display:table-cell"のプロパティは、少しを近づけるようです。それは私よりも多くを知っている人々によってより多くの仕事を必要とします。
私は、私はこの1つを考え出したと思います。トリックはdisplay:tableを使い、キャプションにはよく忘れてしまうdisplay:table-captionを使います。 http://codepen.io/jhereg00/pen/qEGzob
それは基本的にこのです:
<figure>
<img>
<figcaption></figcaption>
</figure>
figure {
display: table;
caption-side: bottom;
}
figcaption {
display: table-caption;
}
または、あなたはフィドルで行ったように、コンテナのスタイルにするために、あなたがする必要があります私はここでペンを作りました私のペンのように、別のラッピングdivを追加してください。
+1のための+1。 –