爲什麼CSS浮動不起作用當我需要它們時

-1

當我發現浮動元素都擴展到其行中最高塊的高度時，我正在製作一個塊狀網格，有點像Pinterest佈局。爲什麼CSS浮動不起作用當我需要它們時

「嘿！」我想。「如何運用這個來讓我的邊欄和我的內容一樣高！」但由於某種原因，它不會那樣工作。我期待着找到一個等高柱子的解決方案，它只是像使用網格一樣使用浮子，但似乎並不存在。

所以我的問題可以概括爲：你如何使等高的列與浮動網格的網格一樣容易？

2012-11-16 Kevin McTigue

當然，你可以做等高列 - 沒有黑客，JavaScript或mark-一百萬額外的比特（儘管在IE7或更低版本中支持不是很好）。祕密是在相鄰的元素上使用display: table-cell。

HTML：

<div class="container"> 
    <div id="col1"> 
     Small content here 
    </div> 

    <div id="col2"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
    </div> 
</div>

CSS：

div.container { display: table } 

div.container > div { display: table-cell; border: 1px solid; padding: 1em } 

div#col1 { background: orange }

演示：

http://jsfiddle.net/y9e4d/

來源

2012-11-16 20:23:35 cimmanon

您可以使用高度：100％，但需要父元素具有100％的高度。首先將HTML和身高設置爲100％，並通過元素工作。

您還可以使用jQuery來獲取特定元素的高度，然後使用jQuery根據所選元素設置邊欄的高度。

可能是這樣的：

$(document).ready(function() { 
$('#sidebar').height($('#container').height()); 
});

工作例如：

<!DOCTYPE html> 
    <html> 
    <head> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
    <script> 
     $(document).ready(function() { 
         $('#sidebar').height($('#container').height()); 
        }); 
    </script> 
    </head> 
    <body> 

      <div style="height: 200px; border: 1px solid red; width: 500px; float: left;" id="container">Content</div> 
      <div style="border: 1px solid green;" id="sidebar">Sidebar</div> 

    </body> 
    </html>

來源

2012-11-16 19:57:02 EibergDK

爲什麼CSS浮動不起作用當我需要它們時

回答

相關問題