html - 防止 DIV 高度影响下方 DIV 的位置

Question

请考虑以下代码带来的问题:

<div id='container'>
    <div id='topLeft' style='background-color:red;float:left'>Top Left</div>
    <div id='topRight' style='background-color:green;float:left;font-size:x-large'>Top Right</div>
    <div id='clearDiv' style='clear:both;'></div>
    <div id='bottom' style='background-color: yellow;'>Bottom</div>
</div>

在a fiddle I've created ，这会产生以下结果:

就我正在处理的页面而言，这个问题是黄色 div 上方标记为 bottom，由绿色 div(右上角)的额外高度引起。我希望黄色 div 与红色 div 的底部(左上角)对齐，而不管绿色 div 的高度如何.

现在，使用定位很容易解决这个问题，如下所示 ( fiddle here ):

<div id='container' style='position:relative'>
    <div id='topLeft' style='background-color:red;float:left;width:100px'>Top Left</div>
    <div id='topRight' style='background-color:green;float:left;font-size:x-large;position:absolute;left:100px;z-index:-1'>Top Right</div>
    <div id='clearDiv' style='clear:both;'></div>
    <div id='bottom' style='background-color: yellow;'>Bottom</div>
</div>

产生以下结果:

这正是我想要的。不幸的是，因为绿色的 Top Right div 现在是绝对定位的，我现在必须指定它的左侧位置以确保它仍然出现在红色的右侧(左上)div。

在我正在编写的应用程序中，我不得不花费大量精力不断地将这个绿色 div 的等效项定位到红色 div 的右侧>，如果它没有 position:absolute 属性，则根本不需要任何努力。如果没有它，它就会自然地出现在红色 div 之后，就像它在第一个代码示例的结果中所做的那样。

所以我的问题是:有没有一种方法可以实现与我的解决方案相同的结果——也就是说，黄色 div 的顶部与红色 div - 没有将 position:absolute 添加到绿色 div？

更新 在 Ned Rockson 的回答之后，我应该补充一点，明确设置任何这些 div 或包装 div 的高度也是不可能的。

Answer 1

#container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
#topLeft {
  background-color: red;
}
#wrapper {
  position: relative;  
}
#topRight {
  background-color: green;
  font-size: x-large;
  position: absolute;
  left: 100%;
  top: 0;
  width: 5em; /* THIS IS  THE ONLY "MANUAL" SETTING */
}
#bottom {
  background-color: yellow;
  width: 100%;
}

<div id='container'>
  <div id='wrapper'>
    <div id='topLeft'>
      Top Left
    </div>
    <div id='topRight'>
      Top Right
    </div>
  </div>
  <div id='bottom'>
    Bottom
  </div>
</div>

此解决方案要求您“手动”设置 topRight 元素的宽度，但高度由 CSS 自动处理。