左浮动相等的高度

<html> 
    <head></head> 
    <body> 
     <div> 
      <div style="float: left; width: 300px; border: 1px solid black;"> 
       testomgsgo<br/> 
       testete<br/> 
       testete<br/> 
       testete<br/> 
       testete<br/> 
      </div> 
      <div style="float: left; width: 300px; border: 1px solid black;"> 
       <div style="background: #FF0000; width: 50px; height: 50px; margin-left: auto;"></div> 
      </div> 
      <div style="clear: both"></div> 
     </div> 
    </body> 
</html>

有了上面的代码，左手边将有可变的内容，我需要div在右边的div（红色框）到站点在底部，所以它的底部边缘与左侧div高度的底部。左浮动相等的高度

我试过使用自动顶部边距，但我相信问题是我无法获得右侧div的高度以匹配左侧div。

有没有办法用CSS来做到这一点，还是我不得不求助于JavaScript来匹配高度？

来源

2011-12-20 Mikeb

这是你在找什么：http://jsfiddle.net/htfRw/

在Safari测试，火狐

编辑：

这是一个容器内：http://jsfiddle.net/htfRw/2/

来源

2011-12-20 00:41:10

这工作，如果他想要100％的高度（如在页面的高度）。我想他想要一个容器中的列。 – Purag 2011-12-20 00:53:08

是的，这是非常接近，但 – Mikeb 2011-12-20 17:03:26

你试过

margin-top: 0;

来源

2011-12-20 01:20:29 Dee

这是你在找什么？

http://jsfiddle.net/7b3Pc/

基本上，可变DIV控制所有其它同级的高度通过其父DIV的div。兄弟姐妹绝对定位和身高：100％。

<html> 
    <head></head> 
    <body> 
     <div> 
      <div style=" width:600px; border: 1px solid black; position:relative"> 
       <div style="width: 300px;"> 
       testomgsgo<br/> 
       testete<br/> 
       testete<br/> 
       testete<br/> 
       testete<br/> 
      </div> 
       <div style="width: 300px; height:100%; position:absolute; top:0;left:300px; border: 1px solid black;"> 
        <div style="background: #FF0000; width: 50px; height:100%; margin-left: auto;"> 
        </div> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

来源

2011-12-20 01:46:45 Vigrond

如果你downvote请评论。 – Vigrond 2011-12-20 22:29:43

这只是猜测，但只有我们中的一个没有被拒绝投票。 +1来平衡比赛场地。 – 2011-12-21 12:48:01

你真的不需要在这里使用float。我建议使用display: inline-block代替，因为您可以依靠vertical-align属性垂直定位第二个<div>而不是使用margin。

HTML：

<div> 
    testomgsgo<br/> 
    testete<br/> 
    testete<br/> 
    testete<br/> 
    testete<br/> 
</div><div class="second"> 
    <div></div> 
</div>

注意这里是关闭</div>和<div class="second">之间没有空格。因为这两个元素都是内联元素，所以标记中的任何空格都会导致这两个元素之间存在小的水平空间。

CSS：

body > div { 
    width: 300px; 
    border: 1px solid #000; 
    vertical-align: bottom; 
    display: inline-block; } 
.second div { 
    background: #FF0000; 
    width: 50px; 
    height: 50px; }

前瞻：http://jsfiddle.net/Wexcode/FwD3Q/

来源

2011-12-20 17:42:19 Wex

左浮动相等的高度

回答

相关问题