Question

我不完全确定这是可能的，但我希望能够实现这一目标。

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

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

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

Answer 1

<强> 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无法做到这一点。

See this JSFiddle

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

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

如果您查看JS Fiddle，并更改图片的'width'属性，您可以看到左列如何更改尺寸。

Answer 3

您可以为父div设置css display样式为table-row，为子div设置table-cell。但是，IE＆lt; IE不支持这些样式。 8，所以如果你需要支持旧的浏览器，你需要使用不同的解决方案。

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

3 个答案: