-1

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

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

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

4

2 回答 2

2

当然，您可以制作等高的列——无需 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/

于 2012-11-16T20:23:35.330 回答
1

您可以使用 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>
于 2012-11-16T19:57:02.613 回答