这是标记:
<div ID="main-container" > <div ID="left-div" > ... </div> <div ID="right-div" > ... </div></div>
这是CSS:
#main-container { position: relative; min-height: 500px; } #left-div { position: relative; float: left; wIDth: 700px; min-height: inherit; } #right-div { position: relative; float: right; wIDth: 248px; min-height: inherit; height: inherit; }.clearfix:after { content: " "; display: block; height: 0; clear: both; visibility: hIDden; }.clearfix { display: inline-block; _height: 1%; clear: both; }.clearfix { display: block; clear: both; }.border { border: solID 1px #000; }
如果#left-div中的内容超过500px,则#right-div不会展开匹配。在一个例子中,我试过,firefox表示#主容器的计算样式高度为804px,#left-div的计算样式高度为800px,#right-div的计算样式高度为586.2px,如它已经扩展到适合自己的内容。
我明白我可能会这样做错了,如果这是一个重复的问题,那么我很抱歉,但我不太确定要搜索什么。
解决方法 我可以把我的大脑全部放在我想要的位置,但是我认为这只能使用表行为来解决,即使用< table> s(如果需要是 IE6 and IE7 compatible)或显示:table / table-row / table-cell这是实际上相同的事情,但不会让你在同伴面前尴尬,因为表是邪恶的;)。我会去一张桌子
随意证明我的错,并发布一个健全的CSS解决方案,我会很高兴!
总结以上是内存溢出为你收集整理的HTML/CSS将div设置为兄弟的高度全部内容,希望文章能够帮你解决HTML/CSS将div设置为兄弟的高度所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)