我有一个主div容器(橙色)和几个浮动div容器(灰色和红色)。这些内部div有一些内容,主div必须适合高度较高的div的高度。我面临的问题与第一个div(灰色的)有关。根据div中的内容,我必须保持它的最大高度,所以如果它比任何其他div都短,它需要调整到最大高度,如果它是更大的主div适合它的大小。
这个div还包含两个div,一个在div的顶部,另一个在div的底部。
我确信css属性positionbottom(或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解决方案才能让它工作。我也可以张贴完整的代码,但尊重你的时间,可能没有人疯狂到足以阅读不相关的线条音调。
当然,marginbackground-color属性在这里只是为了提供视觉帮助。
所以基本上我的问题是:如何使内部div 1保持与所有其他内部div相比的最大高度,以及如何使顶部和底部div在父元素中工作。当然,如果顶块和底块很大的话,我不需要它们互相混合,而是需要增加父div(和主容器)的大小。
当然,我可以很容易地使用javascript解决方案,处理元素的offthesight属性,但这不是解决方案(仅css)。另外,我不要求整个跨浏览器解决方案,任何与ie8+和更新的chrome、firefox和opera浏览器一起工作的东西对我来说都是完全可以接受的。
我搜索了SO和其他相关资源好几天,但找不到任何可用的资源。现在还不确定是否有可能。因此,如果有什么我可以做的,使它的工作,让我知道,任何评论,建议,小费或伎俩是热烈欢迎。
我的目标示例:
最后,我想用divs和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>

最佳答案

这是您的解决方案(例如: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>

“位置:绝对”是关键,但当灰色列“较长”时,则是重叠的。为了解决这个问题,我做了一个定位:静态设置相同的数据(也必须在这个div中绑定它)来计算“最小”高度。但是这个div被设置为visibility:hidden,以不干扰您的视觉效果。它在chrome和firefox上运行得很好。
**此外,如果向要测试的“块”中添加行,则必须同时向可见块和不可见块中添加行。同样,当您将数据绑定到两个字段时,这将自动完成。
一些帮助我的阅读:
How to align content of a div to the bottom?
http://css-tricks.com/absolute-positioning-inside-relative-positioning/

关于html - CSS定位,自动调整大小,上下对齐,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/27924358/

10-12 12:48
查看更多