HTMLCSS将div设置为兄弟的高度

HTMLCSS将div设置为兄弟的高度,第1张

概述我有三分之二的2 div。一个被包含的div被浮动,另一个浮动了。我想要2个兄弟姐妹们总是处于同一个高度,但是有一个问题。到目前为止,我只是在Firefox中查看该页面,并且认为在使用至少一个浏览器后,我会担心任何跨浏览器问题。 这是标记: <div id="main-container" class="border clearfix"> <div id="left-div" class= 我有三分之二的2 div。一个被包含的div被浮动,另一个浮动了。我想要2个兄弟姐妹们总是处于同一个高度,但是有一个问题。到目前为止,我只是在firefox中查看该页面,并且认为在使用至少一个浏览器后,我会担心任何跨浏览器问题。

这是标记:

<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设置为兄弟的高度所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1116623.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-29
下一篇 2022-05-29

发表评论

登录后才能评论

评论列表(0条)

保存