CSS 定位、自动调整大小、上下对齐答案

【问题标题】：CSS positioning, auto-resize, top & bottom alignmentCSS 定位、自动调整大小、上下对齐
【发布时间】：2015-03-11 12:57:14
【问题描述】：

我有一个主 DIV 容器（橙色）和几个浮动 DIV 容器（灰色和红色）。这些内部 DIV 有一些内容，主 DIV 必须适合具有更高高度的 DIV 的高度。我面临的问题与第一个 DIV（灰色一个）有关。根据该 DIV 中的内容，我必须将其保持在最大高度，因此，如果它比任何其他 DIV 短，则需要将其调整为最大高度，如果它较大的主 DIV 适合其大小。

该 DIV 还包含我试图定位的两个 DIV，一个在顶部，另一个在 DIV 底部。到目前为止，无论我尝试什么，都失败了。

我确信 CSS 属性 position 和 bottom（或 top）可以解决这个问题，但到目前为止我尝试的任何组合都没有帮助。

<!-- MAIN CONTAINER: Orange -->
<div style="overflow:hidden; width:550px; background-color:#ffcc00">

  <!-- INNER CONTAINER #1: Gray -->
  <div style="overflow:hidden; float:left; width:180px; margin:5px 5px; background-color:#eeeeee">

    <!-- TOP BLOCK -->
    <div style="">This block goes top!</div>

    <!-- BOTTOM BLOCK -->
    <div style="">This block goes bottom!</div>

  </div>

  <!-- INNER CONTAINER #2: Red -->
  <div style="overflow:hidden; float:left; width:250px; margin:5px 5px; background-color:#ff0000">Not that important block<br />with some content<br />...</div>

</div>

为了保持我的代码清晰，我只发布了简单的结构，并且需要 CSS 解决方案才能使其正常工作。我也可以发布完整的代码，但请尊重您的时间，可能没有人会疯狂到阅读不相关行的语气。

当然，margin 和 background-color 属性在这里只是为了提供视觉帮助。

所以基本上我的问题是：与所有其他内部 DIV 相比，如何将 Inner DIV #1 保持在最大高度，以及如何使顶部和底部 DIV 在父元素内工作。当然，如果它们很大，我不需要顶部和底部块相互混合，而不是它们必须增加父 DIV（和主容器）的大小。

当然，我可以使用 JavaScript 变通方法轻松做到这一点，处理元素的 offsetHeight 属性，但这不是解决方案（仅限 CSS）。另外，我不要求提供完整的跨浏览器解决方案，任何适用于 IE8+ 和更新的 Chrome、Firefox 和 Opera 浏览器的东西对我来说都是完全可以接受的。

我已经搜索 SO 和其他相关资源好几天了，但找不到任何可用的东西。现在甚至不确定这是否可能。因此，如果有什么我可以做的事情，请告诉我，任何评论、建议、提示或技巧都受到热烈欢迎。

我的目标示例：

最后，我想（以某种方式）仅使用 DIV 和 CSS 来模拟这种效果。

<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="200" valign="top">Top</td>
    <td width="350" rowspan="2" valign="top">Side</td>
  </tr>
  <tr>
    <td valign="bottom">Bottom</td>
  </tr>
</table>

【问题讨论】：

你能在 js fiddle 上发帖并在你的问题中链接吗
您是否考虑过使用表格来代替？
@Gerwin，所有相关代码都已经在问题中了。
@Kenyanke 不，由于许多不同的原因，使用表格不能成为解决方案。我知道桌子是可能的，并且知道该怎么做。无论如何，谢谢你的建议。
我相信您需要为此使用 javascript。您是否考虑过使用同位素？检查一下，它可能会派上用场。 isotope.metafizzy.co

标签： html css position css-position

【解决方案1】：

这是您的解决方案（示例：http://jsfiddle.net/jtnx7gw8/）：

<!-- MAIN CONTAINER: Orange -->
<div style="height: 100%; width:550px;position: relative; background-color:#ffcc00; padding: 5px 0;">

  <!-- INNER CONTAINER #1: Gray -->
  <div style="display: inline-block; width:180px; margin:0 5px; vertical-align: top; height: 100%;">

    <!-- TOP BLOCK -->
    <div style="position: absolute; top: 5px; background: pink; max-width: 180px;">This block goes top!<br/>line 2<br/>line 3</div>
    <!-- INVISIBLE TOP BLOCK TO CALCULATE HEIGHT-->
    <div style="visibility: hidden; background: none;">This block goes top!<br/>line 2<br/>line 3</div>

    <!-- BOTTOM BLOCK -->
    <div style="position: absolute; bottom: 5px;background: gray; max-width: 180px;">This block goes bottom!</div>
    <!-- INVISIBLE BOTTOM BLOCK TO CALCULATE HEIGHT-->
    <div style="visibility: hidden;">This block goes bottom!</div>

  </div>

  <!-- INNER CONTAINER #2: Red -->
  <div style="height: 100%; display: inline-block; width:250px; margin:0 5px; background-color:#ff0000">Not that important block<br />with some content.<br/>...</div>

</div>

位置：absolute 是关键，但当灰色列“更长”时重叠。为了解决这个问题，我做了一个定位：静态设置相同的数据（也必须将它绑定到这个 div 中）来计算“最小”高度。但是此 Div 设置为可见性：隐藏，以免干扰您的视觉。它在 Chrome 和 Firefox 中运行良好。

**此外，如果您将行添加到“块”以进行测试，则必须同时添加到可见块和不可见块。同样，当您将数据绑定到两个字段时，这将自动完成。

一些对我有帮助的阅读：

How to align content of a div to the bottom?

http://css-tricks.com/absolute-positioning-inside-relative-positioning/

【讨论】：

答案已更新 - 这是我能想到的最好的解决方案，无需使用 javascript。据我所知，它完全符合您的期望。
是的，迫不及待地想测试一下。它终于按预期工作了。我测试了很多不同的内容，所有这些内容在大多数顶级浏览器上都是正确的。谢谢戴夫！！！让音乐播放，呜呼：D
很高兴听到这个消息！这是一个非常有趣的问题，而且似乎是一个相当普遍的问题。很好的问题，很高兴它终于对你有用。
对不起你的时间，是的，8天前对我来说真的很简单，今天我终于放弃了，把它贴在这里。事情有时并不那么简单，无论它们看起来如何。

【解决方案2】：

具有相对定位的页面元素使您可以控制其中的子元素的绝对位置。

<html>
<body>
<!-- MAIN CONTAINER: Orange -->
<div style="position:relative; overflow:hidden; width:550px; background-color:#ffcc00">

<!-- INNER CONTAINER #1: Gray -->
<div style="overflow:hidden; float:left; width:180px; margin:5px 5px; background-    color:#eeeeee">

<!-- TOP BLOCK -->
<div style="position: auto; top: 0; left: 0; margin:5px 5px; background-color:#eeeeee">This block goes top! BLAH BLAH BLAH</div>

<!-- BOTTOM BLOCK -->
<div style="position: auto; bottom: 0; left: 0; margin:5px 5px; background-color:#eeeeee">This block goes bottom! BLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAH</div>



</div>

<!-- INNER CONTAINER #2: Red -->
<div style="position:relative; overflow:hidden; float:left; width:250px; margin:10px 5px; background-color:#ff0000">Not that important block<br />with some content<br />...</div>

</div>

</body>
</html>

【讨论】：

请注意这些废话，它现在应该可以工作了。（废话是为了证明它有效）
如果这个答案与您真正想要的相符，请将其标记为正确 :)
现在它可以 100% 满足您的要求，请查看代码以了解它。 jsfiddle.net/6hwLaeqy/6我也编辑了这个页面。
请将其标记为正确，因为它回答了您的问题和评论问题。
我已经完成了，请使用 JavaScript 进行操作。

【解决方案3】：

这个怎么样？

更新使用边界作为边缘区域。所以不再需要更改 html 结构。

http://jsfiddle.net/amo4w5aj/15/

html

<!-- MAIN CONTAINER: Orange -->
<div class="container" style="position: relative; overflow:hidden; width:550px; background-color:#ffcc00;">

  <!-- INNER CONTAINER #1: Gray -->
  <div class="grey" style="overflow:hidden; float:left; width:180px; background-color:#eeeeee; ">

    <!-- TOP BLOCK -->
      <div style="">This block goes top</div>

    <!-- BOTTOM BLOCK -->
    <div style="position:absolute;bottom:0;background-color:pink;">This block goes bottom!</div>

  </div>

  <!-- INNER CONTAINER #2: Red -->
  <div class="red" style="overflow:hidden; float:left; width:250px; background-color:#ff0000">Not that important block<br />with some content<br />...</div>

</div>

css

.grey{
    padding-bottom :32767px;
    margin-bottom:-32767px;
}
.container{
    border: 5px solid #ffcc00;
}
.red{
    margin-left : 5px;
}

【讨论】：

不幸的是，当红色块小于灰色块所需的高度时不起作用。在此示例中，顶部块消失了 jsfiddle.net/amo4w5aj/16