jquery - 自动调整宽度未知的 2 个 div

Question

我不完全确定这是可能的，但我希望完成的是这个。

我有两个 DIV 嵌套在一个 div 中，一个在右侧有图像，另一个在左侧有文本。我希望做的是根据图像的大小调整 DIV 的大小以适应。

例如，如果 DIV 的图像为 320w x 270h，整体空间为 720px，那么我希望将包含文本的 DIV 大致重新调整为 400px。我已经将左框宽度设置为自动以适应不同的图像尺寸，但我不知道如何将文本框设置为基于此的正确尺寸。

如果您需要更多信息，请告诉我。

Answer 1

这是你想要的东西：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;}

Answer 2

你肯定需要 JavaScript/jQuery。这不能用纯 CSS 来完成。

请参阅此 JSFiddle。

基本上，使用jQuery，你可以得到容器宽度，右列宽度，然后将左列宽度设置为前两者的差：

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

如果您查看 JS Fiddle，并更改图片的“宽度”属性，您可以看到左列如何更改大小。

Answer 3

您可以为父 div 和子 div设置 cssdisplay样式。但是，IE < 8 不支持这些样式，因此如果您需要支持旧浏览器，则需要使用不同的解决方案。table-rowtable-cell