1

これが可能かどうかは完全にはわかりませんが、私が達成したいと思っているのはこれです。

2つのDIVがdivにネストされており、1つは右側に画像があり、もう1つは左側にテキストがあります。私がやりたいのは、画像のサイズに基づいてDIVのサイズを変更することです。

たとえば、DIVの画像が320w x 270hで、全体のスペースが720pxの場合、テキストを含むDIVのサイズをおよそ400pxに変更したいと思います。さまざまな画像サイズに対応するために左側のボックスの幅を自動に設定していますが、それに基づいてテキストボックスのサイズを適切に設定する方法がわかりません。

もう情報が必要な場合はお知らせください。

4

3 に答える 3

2

これがあなたが欲しいものです：http：//jsfiddle.net/RnUES/

HTML

<div class="container">
<div class="image"><img src="http://www.cs.cmu.edu/~chuck/lennapg/len_std.jpg" /></div>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lectus magna, interdum et faucibus a, sagittis ac diam. Quisque elementum malesuada ligula. Duis lectus quam, tempor dictum pulvinar id, posuere ac dolor. Etiam et ligula odio, non adipiscing lacus. Maecenas sit amet elit at leo congue tempus ut non ante. Vestibulum mauris diam, tincidunt eu viverra sit amet, malesuada et diam. Morbi ligula nulla, tristique laoreet imperdiet sed, posuere et velit. Donec mattis enim in leo feugiat mollis. Donec neque mi, posuere at dapibus vel, vestibulum vel mauris. Donec vestibulum leo eget nulla luctus sed hendrerit mauris tempus. Nunc augue erat, pharetra et mollis laoreet, tempus quis orci. Vestibulum lobortis sodales placerat. Integer imperdiet rhoncus nisl eu tristique. Nunc commodo, nisl a aliquet feugiat, tortor lacus porttitor libero, ut sollicitudin justo ligula nec justo.</div>

</div>​

CSS

.container{width:720px; background:#ccc;}
.image{float:left;}
.text{overflow:hidden;}
于 2012-07-16T19:16:44.263 に答える
0

あなたは間違いなくJavaScript/jQueryが必要になります。これは、プレーンCSSでは実行できません。

このJSFiddleを参照してください。

基本的に、jQueryを使用すると、コンテナーの幅と右側の列の幅を取得し、左側の列の幅を最初の2つの差として設定できます。

$(document).ready(function(){
    var wrapWidth = $('#wrapper').width();
    var rightWidth = $('#right').width();
    var leftWidth = wrapWidth - rightWidth;
    $('#left').css('width', leftWidth + 'px');
});​

JS Fiddleを見て、画像の「width」属性を変更すると、左側の列のサイズがどのように変化するかがわかります。

于 2012-07-16T19:10:33.290 に答える
0

親 div と子div に対してcssdisplayスタイルを設定できます。ただし、これらのスタイルは IE 8 未満ではサポートされていないため、古いブラウザーをサポートする必要がある場合は、別のソリューションを使用する必要があります。table-rowtable-cell

于 2012-07-16T19:20:09.737 に答える