html - 仅使用 css 均衡 2 div 高度

标签 html css

当一个div高度很大时,我想等于两个div的高度

例子:

<div style="float:left;padding:2px;background:red;">B</div>
<div style="float:left;padding:2px;background:green;">A<br />C<br />D</div>
<div style="clear:both;"></div>

Div 2 的高度大于 div 1

最佳答案

我可能有一个可能的解决方案:

http://jsfiddle.net/adaz/wRcWj/1/

嗯,它可能会在 ie7+ 上运行,所以我不确定这对你来说是否足够好。

简要说明:

1) 设置相对于容器的位置并自动清除它(我使用了 overflow: hidden 但你也可以使用 clearfix)。 2) 将其中一个 div float 在里面,这样容器就会根据里面的内容展开。 3) 将绝对位置设置为您的一个 div,并将其顶部和底部位置设为 0px,这将确保它具有 100% 的高度。

缺点: - 缺乏对 IE6 的支持 - 你需要选择哪个 div 总是有较少的内容,然后绝对定位

希望对您有所帮助!

关于html - 仅使用 css 均衡 2 div 高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9507371/

相关文章:

html - 以磁贴为中心的 Twitter Bootstrap

html - 将相对位置设置为 CSS block 内的图像

html - bootstrap-table 更改由 bootstrap 设置的布局

css - 100% 高度的 chalice 布局

html - 按钮悬停,图像变暗

javascript - 更改 dateRangePicker 的日期格式

jquery - 更改滚动条上 Bootstrap 导航栏的颜色

html - Bootstrap 2.3.2 表格行中的拆分按钮下拉列表

javascript - 我应该如何开始学习 JavaScript、jQuery 等?我的编程知识为零

html - 如何在 css3 中的 float 元素上放置背景并更改其不透明度?