2011-10-17 16 views
4

spanに親のサイズを増やす前にラップする方法はありますかdivキャプションを画像のサイズに縮小

マイモックアップ:http://jsfiddle.net/e52pZ/4/

色のブロックは不定サイズの画像であり、白いブロックは互いに隣接してフローティングされるべきです。


私は暫定的にBartのjQueryの回答を受け付けています。誰かが "純粋な" HTML + CSSソリューションを見つけ出すことができれば、私たちはそれを見たいと思っています。

+0

+1のための+1。 –

答えて

4

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/

+0

1から無限大のスケールでは、あなたはちょうどcss/htmlでこれを行うことができないのですか? – bukzor

+0

私はバートではありませんが、さまざまなシュリンクラッピング技術などを使って、しばらく試してみました。私の確実性(1から10までのスケールで - 申し訳ありませんが、私は無限と何をするべきか分かりません) 8.うまくいけば、誰かが私を間違っていると証明するでしょう。私は純粋なCSSとHTMLだけでこれが可能であるために/愛しています。 =) –

+2

1から無限までのスケールで...私は1と無限の間の半分です。 ;) – Bart

1

A "display:table-cell"のプロパティは、少しを近づけるようです。それは私よりも多くを知っている人々によってより多くの仕事を必要とします。

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

1

私は、私はこの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を追加してください。

関連する問題