html - 如何将 div 包裹在不均匀的内容周围

Question

我有一个谷歌地图应用程序，其中一个绝对定位的容器 div 包含两个在 map 上方不同高度的 float div。我无法将容器 div 包裹在两个 float 的内部 div 周围并消除第一个较小的内部 div 下额外的非包裹 div 空间。我想我需要让容器 div 环绕它的内容。

这是 Fiddle .我正在尝试摆脱位于蓝色背景的第一个内部 div 下面的 fiddle 中多余的黄色空间。
div.容器 { 显示: block ； 背景色:黄色； 颜色:黑色; position:absolute； 边框:2px 纯蓝色； z-指数: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，则 Div 是矩形，您将无法摆脱黄色背景空间。 您可以将 content1 放在 content2 中，然后使用 absolute 将其定位在该 div 之外。 您还可以使用 display:table 作为包装器，并为 content1 和 content 2 使用 display table-cells。这样他们就可以获得包装器的完整尺寸。 这样整个左侧将是蓝色背景，您可以垂直放置其内容。 我认为最好在此处附上您计划完成的工作的图片。