HTML / CSS将div设置为兄弟的高度 [英] HTML/CSS set div to height of sibling

问题描述

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

在这里是标记：

 < div id =main-containerclass =border clearfix> 
< div id =left-divclass =border> 
 ... 
< / div> 
< div id =right-divclass =border> 
 ... 
< / 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：;显示：block; height：0;清除： visibility：hidden; } 
 .clearfix {display：inline-block; _height：1％;清除： } 
 .clearfix {display：block;清除： } 
 .border {border：solid 1px＃000; } 
  

如果＃left-div 长于 500px ，则＃right-div 不会展开匹配。在我试过的一个例子中，Firefox说计算的＃main-container 的样式高度是 804px ＃left-div 的高度 800px ，以及＃

我知道我可能是这样错误的方式，如果这是一个重复的问题，然后我道歉， h2_lin>解决方案

我可以把我的大脑所有我想要的，但我认为这可以真正解决只有使用表行为，即使用< table> s（如果您需要 IE6和IE7兼容）或 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设置为兄弟的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！