为什么当我需要 CSS Floats 时它们不起作用 [关闭]答案

【问题标题】：Why CSS Floats Don't Work When I Need Them To [closed]为什么当我需要 CSS Floats 时它们不起作用 [关闭]
【发布时间】：2012-11-16 19:50:46
【问题描述】：

当我发现浮动元素都展开到所在行中最高块的高度时，我正在制作一个块网格，有点像 Pinterest 布局。

“嘿！”我想。 “如何应用它使我的侧边栏与我的内容高度相同！”但由于某种原因，它不能那样工作。我到处寻找一个等高列的解决方案，它只使用浮点数，就好像它们是一个网格一样，但似乎没有。

所以我的问题可以总结为：如何像浮动正方形网格一样轻松制作等高列？

【问题讨论】：

标签： css css-float multiple-columns

【解决方案1】：

当然，您可以制作等高的列——无需 hack、JavaScript 或一百万额外的标记（尽管在 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/

【讨论】：

【解决方案2】：

您可以使用 height: 100%，但这需要父元素具有 100% 的高度。首先将 html 和 body 高度设置为 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>

【讨论】：