为什么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浮动不起作用当我需要它们时

回答

相关问题