我可以包装两列并使用 position: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;
}

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

请参阅此处的 JSFiddle。

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

我

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

谢谢！

Answer 1

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