如何包装不均匀内容的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显示表格单元格。这样，它们将获得包装器的完整大小。 这样整个左侧将是背景蓝色，并且您可以垂直放置其内容。 我认为你打算完成的图片在这里最好。