我有一个主DIV容器(橙色)和一些浮动的内部DIV容器(灰色和红色)。这些内部DIV具有某些内容,主DIV必须适应高度较高的DIV的高度。我面临的问题与第一个DIV(灰色的DIV)有关。根据该DIV内的内容,我必须将其保持在最大高度,因此,如果它比任何其他DIV短,则需要调整大小以达到最大高度,如果它更大,则主DIV适合其大小。
该DIV还包含两个DIV,我正在尝试将其中一个定位在顶部,另一个定位在DIV底部。到目前为止,我尝试过的任何组合都失败了。我确信CSS属性position和bottom(或top)与解决此问题有关,但是迄今为止我尝试过的任何组合都没有帮助。
为了保持代码清晰,我只发布简单的结构,并需要CSS方案来使其正常工作。我也可以发布完整的代码,但尊重您的时间,可能没有人会疯狂地阅读无关的行数。
当然,
所以,基本上我的问题是:如何保持内部DIV#1在高度上与所有其他内部DIV相比最大,并且如何使顶部和底部DIV在父元素内工作。 当然,如果它们很大,我不需要顶部和底部块混合在一起,那么它们必须增加父DIV(和主容器)的大小。
当然,我可以通过JavaScript解决方案轻松实现它,处理元素的offsetHeight属性,但这不可能是解决方案(仅限CSS)。 此外,我不要求整个跨浏览器解决方案,任何适用于IE8+以及更新的Chrome,Firefox和Opera浏览器的解决方案都非常可接受。
我搜索SO和其他相关资源数天,但找不到任何可用的东西。现在甚至不确定是否可能。因此,如果有任何我可以做的事情使其正常工作,请告诉我,任何评论,建议,提示或技巧都非常受欢迎。
我的目标示例:
最后,我想仅使用DIV和CSS模拟此效果(某种方式)。
该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解决方案轻松实现它,处理元素的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>