左浮動相等的高度

<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

左浮動相等的高度

回答

相關問題