我有一个主div容器(橙色)和几个浮动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 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/