自動調整大小2寬度未知的div div

我不完全確定這是可能的，但我希望完成的是這個。自動調整大小2寬度未知的div div

我有兩個DIV的嵌套在一個div，一個具有圖像的權利，並具有文本向左其他。我希望能夠根據圖像大小調整DIV的大小。

例如，如果DIV的圖像爲320w x 270h，整體空間爲720px，那麼我希望將包含文本的DIV大致重新調整爲400px。我已經將左框寬度設置爲自動以適應不同的圖像尺寸，但我不知道如何根據此設置文本框的大小。

讓我知道，如果你需要的信息了。

來源

2012-07-16 user1470118

任何原因，你根本不可能有一個包含分區，沒有孩子的div，與圖像浮動的權利？然後左邊的文字將很好地包裹在圖像周圍。 – chipcullen 2012-07-16 18:56:58

是的，這兩個DIV的邊界都有邊框，並且有間隔。 – user1470118 2012-07-16 18:59:21

這裏是你想要的東西：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-16 19:16:44 SVS

美麗！這正是我希望做的。我不知道它會起作用，因爲我可以發誓我嘗試過這樣的事情，但是在匹配你所擁有的奇妙的工作之後。謝謝！ – user1470118 2012-07-16 19:48:46

你絕對需要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小提琴，並更改圖片的'width'屬性，您可以看到左列如何更改大小。

來源

2012-07-16 19:10:33 chipcullen

您可以將CSS display樣式設置爲table-row父DIV和爲氣的table-cell ld divs。但是，IE < 8不支持這些樣式，因此如果您需要支持舊瀏覽器，則需要使用其他解決方案。

來源

2012-07-16 19:20:09 limscoder

自動調整大小2寬度未知的div div

回答

相關問題