18

たとえば、親divには2つの子divがあり、1つにはテキストが含まれ、もう1つには既知の（ただし可変の）幅と高さの画像が含まれます。

をお願いします。

  • 画像の幅に合わせて縮小する最初の子（画像を含む）divの幅（これは私が行うことができます）
  • 画像を含むdivの幅に合わせて縮小する（幅が指定されていない）親div（これも問題ありません）
  • テキストを含む2番目の子div（幅も指定されていません）は、含まれるテキストの量に関係なく、親divの幅と一致します（ここで注意が必要です）。

2番目の子のテキストの量が、親のdivの幅を画像の幅よりも広くするまで、必要な処理を実行するバージョンがあります。

これが私のコードです：

css：

#container{border:1px solid #f00;display:inline-block;}
#child1{border:1px solid #0f0;}
#child2{border:1px solid #00f;}
img {border:1px solid #000;}

html：

<div id="container">
<div id="child1"><img src="//www.google.com/logos/2012/Teachers_Day_Alt-2012-hp.jpg" width="300" height="116"></div>
<div id="child2">Lorem ipsum dolor sit amet.</div>
</div>

これがjsfiddleです：http： //jsfiddle.net/BmbAS/1/

「テキストを長くする/短くする」リンクをクリックしてテキストの量を増やすと、どこが間違っているかを確認できます

tldr-すべてのdivを同じ幅にします。これは画像の幅と同じです。

ps。最新のブラウザソリューションのみが必要

4

3 に答える 3

28

jsFiddleのこの編集済みバージョンを参照してください。

CSSに追加されるものは次のとおりです。

#container {
    display: table-cell;
}
#child1 {
    display: table-row;
    width: 1px;
}
#child2 {
    display: table-cell;
    width: 1px;
}
于 2012-10-05T13:21:46.313 に答える
-2

小さな JavaScript (この例では jQuery) を使用する場合は、テキスト div の幅を画像 div の幅に設定できます。

フィドルの JS の最後に追加$("#child2").css({'width': $('#child1').width()});してみるか、ここでフォークを確認してください: http://jsfiddle.net/VXEMu/

于 2012-10-05T13:28:32.520 に答える