css - 我可以包装两列并将其中一列向上移动到位置 :relative, 并且包装器底部没有任何额外空间吗？

Question

如果我有一些 HTML:

<div class="wrapper">
 <div class="first">&nbsp;</div>
 <div class="second">&nbsp;</div>
</div>

还有一些 CSS:

.wrapper{
 font-size:0px;
 padding-top:200px;
 background:rgba(255,0,0,.2);
}
.first{
 display:inline-block;
 width:25%;
 height:300px;/*Actually the height will be dependent on text.*/
 background:black;
 position:relative;
 bottom:100px;
}
.second{
 display:inline-block;
 width:75%;
 height:100px;/*Height actually dependent on text*/
 background:green;
}

注意:高度并不是真正固定的。它们依赖于文本。

See JSFiddle here.

如何使包装器仅包装内容而不包装向上移动列时剩余的空间？我希望黑色柱子下面没有粉红色。

我尝试了 overflow:auto/hidden/visible/etc 的所有组合我能想到，并且我在谷歌上搜索并找到了不可能用 position:absolute 处理的信息。 ，但我找不到任何关于 position:relative 的信息.

谢谢!

Answer 1

您可以尝试将 margin-bottom:-100px; 添加到此代码(到 .first class)。