如何包裝不均勻內容的div

Question

我有一個谷歌地圖應用程序，其中絕對定位的容器div包含兩個不同高度的浮動div，位於地圖上。我無法繞着兩個浮動的內部div打包容器div，並消除了第一個較小的內部div下額外的非包裝div空間。我想我需要讓容器div圍繞它的內容。

這裏是Fiddle。我試圖擺脫小提琴中額外的黃色空間，低於藍色背景的第一個內部div。
div.container { display：block; background-color：Yellow; 顏色：黑色; position：absolute; 邊框：2px純藍色; z-index：600; }

div.content1 
{ 
width:20px; 
height: 30px; 
display:inline-block; 
background-color: #4b6c9e; 
color:White; 
position: relative; 
border:2px solid white; 
z-index: 700; 
float:left; 
} 

div.content2 
{ 
width:250px; 
height: 400px; 
display:inline-block ; 
background-color:Gray; 
color:White; 
position: relative; 
border: 2px solid red; 
z-index: 699; 
float:right; 
} 

<div class="container"> 
<div class="content1"> 
<p>+</p> 
</div> 
<div class="content2"> 
<p>some content here</p> 
</div> 
</div> 

Answer 1

DIV的是長方形的，如果你使用，你將無法擺脫黃色背景空間的包裝股利。 您可以將content1放入content2中，並使用絕對位置將其放在該div的外部。 您還可以使用display：table作爲包裝器，併爲content1和content 2顯示錶格單元格。這樣，它們將獲得包裝器的完整大小。 這樣整個左側將是背景藍色，並且您可以垂直放置其內容。 我認爲你打算完成的圖片在這裏最好。