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上方的空格标有底部，导致通过绿色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>

产生以下结果：

这正是我想要的。很遗憾，因为绿色 右上角 div现在绝对定位，我现在必须指定其左侧位置以确保它仍然显示在右侧红色（左上角）div。

在我正在编写的应用程序中，我不得不花费大量精力将这个绿色div的等效内容连续放置在红色div的右侧，而没有任何努力如果它没有position:absolute属性，则完全被要求。如果没有它，它就会自然地出现在红色div之后，就像第一个代码示例的结果一样。

所以我的问题是：是否有办法实现与我的解决方案相同的结果 - 也就是说，黄色div的顶部与红色{{1}的底部相对应1}} - 不将div添加到绿色div？

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

Answer 1

您可以将左上角和右上角div放入设置了高度且overflow设置为hidden的div中。这不是一个非常优雅的方法，因为外部div的高度设置，但它适用于这个特定的问题。

<html>
  <body>
      <div id='container' style='position:relative'>
          <div style='overflow:hidden; height:18px'>
              <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'>Top Right</div>
          </div>
          <div id='clearDiv' style='clear:both;'></div>
          <div id='bottom' style='background-color: yellow;'>Bottom</div>
      </div>
  </body>
</html>

Answer 2

如果你想让上面两个DIV尽管它们的高度不同而底部对齐，你可以将它们分配给它而不是浮点数：

#topLeft, #topRight {
  display: inline-block;
  vertical-align: bottom;
  }

以下是完整的代码：

#topLeft, #topRight {
  display: inline-block;
  vertical-align: bottom;
  }

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

请注意，我将</div>元素的结束.topLeft移到了下一行，以避免代码中出现任何空格和换行符。

使用flex的替代解决方案：

如果你需要topLeft和topRight具有相同的高度，你可以将它们包装在父容器中并将display: flex分配给这个容器：

#wrapTop {
  display: flex;
  }

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

Answer 3

#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会自动处理高度。

防止DIV高度影响DIV低于

3 个答案: