Jquery 自动调整宽度未知的2个div的大小

我不完全确定这是否可能，但我希望实现的是这一点

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

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

---

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

您肯定需要JavaScript/jQuery。这不能用简单的CSS来完成

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

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

---

如果您查看JS FIDLE，并更改图片的“宽度”属性，您可以看到左栏的大小是如何变化的。

以下是您想要的：

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>​

---

您可以将父div的css

display

样式设置为

table row

，子div的css

table cell

。但是，IE<8不支持这些样式，因此，如果您需要支持旧浏览器，则需要使用不同的解决方案。

为什么您不能让一个包含div、没有子div且图像浮动到右侧的浏览器？然后左边的文字会很好地环绕图像。是的，两个DIV的周围都有边框，并且间隔开了。真漂亮！这就是我希望做的。我不确定它会起作用，因为我可以发誓我试过这样的东西，但是在匹配了你的东西之后，它工作得非常好。谢谢

.container{width:720px; background:#ccc;}
.image{float:left;}
.text{overflow:hidden;}