HTML / CSS将div设置为兄弟的高度

问题描述

我有两个div包含在第三个。其中一个包含的div是左浮动，其他浮动右。我想2兄弟div总是在相同的高度，但我有一个问题。到目前为止，我只是在Firefox浏览页面，并认为我会担心任何跨浏览器的问题，当我在至少一个浏览器工作后。

在这里是标记：

  
 
我知道我可能是这样错误的方式，如果这是一个重复的问题，然后我道歉， h2_lin>解决方案
我可以把我的大脑所有我想要的，但我认为这可以真正解决只有使用表行为，即使用< table>  s（如果您需要）或 display：table / table-row / table-cell （这实际上是一样的，但不会在你的同伴面前感到尴尬，因为表是邪恶的。 p> 
 
 
我会去一张桌子。
 
 
 
随便证明我的错误，并发布一个合理的CSS解决方案，我很高兴！ 
 
I have 2 div's contained in a third.  One of the contained div's is floated left, the other floated right.  I would like the 2 sibling div's to always be at the same height, but am having a problem with this.  So far I am only viewing the page in Firefox, and figured I'd worry about any cross-browser issues after I get it working in at least one browser.

Here is the markup:
<div id="main-container" class="border clearfix">
    <div id="left-div" class="border">
        ...
    </div>
    <div id="right-div" class="border">
        ...
    </div>
</div>
Here is the 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; }
If the content in the #left-div is longer than 500px, the #right-div does not expand to match.  In an example I tried, Firefox said the computed style height of the #main-container was 804px, the computed style height of the #left-div was 800px, and the computed style height of the #right-div was 586.2px, as it had expanded to fit it's own content.
I understand I might be going about this the wrong way, and if this is a duplicate questions then I apologize, but I wasn't quite sure what to search under.
 解决方案 
I can rack my brain all I want, but I think this can really be solved only using table behaviour, i.e. using <table>s (if you need to be IE6 and IE7 compatible) or display: table / table-row / table-cell (which is effectively the same thing but won't embarrass you in front of your peers because tables are evil. ;).
I'd go for a table.
Feel free to prove me wrong and post a sane CSS solution, I'd be delighted!   
                        
这篇关于HTML / CSS将div设置为兄弟的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！