css - 如何将 div 居中并使其围绕其中的 div 展开？

Question

我有一个我想要居中的页面，整​​个内容都有背景和边框。

我制作了一个 div 并设置了我想要的背景颜色和边框设置。

问题是它内部有 float 的 div，背景不会围绕 float 的 div 拉伸(stretch)。我能够让它工作的唯一方法是设置 position:absolute。然后边框确实围绕 float div 展开，但我无法使用常规 html/css 将它们居中。

我找到了一个 javascript hack 来让它居中，但它只在页面加载后居中，而且看起来很糟糕。

我确信有一种方法可以让容器展开并仍然居中，我只是想不出来。

这是一个分享我的问题的示例 html 页面

<div style="background-color: Red; width: 980px; position: absolute;" id="container">
    <br />
    <br />
    <br />
    <br />
    <div style="width: 400px; background-color: Black; float: left;">
        <br />
        <br />
    </div>
    <div style="width: 400px; background-color: Blue; float: left;">
        <br />
        <br />
    </div>
</div>

这是让它工作的 Javascript(使用 Jquery)

$(function() {
        var winH = $(window).height();
        var winW = $(window).width();
        $("#container").css('left', winW / 2 - $("#container").width() / 2);
    });

必须有更好的方法。

谢谢

Answer 1

使用auto作为左右margin使元素居中。

在 float 元素之后放置一个元素，并使用 clear 将其放在它们下面。由于它不是 float 的，它会影响外部 div 的大小。

<div style="margin: 0 auto; background-color: Red; width: 980px;" id="container">
    <br />
    <br />
    <br />
    <br />
    <div style="width: 400px; background-color: Black; float: left;">
        <br />
        <br />
    </div>
    <div style="width: 400px; background-color: Blue; float: left;">
        <br />
        <br />
    </div>
    <div style="clear: both; height: 0; overflow: hidden;"></div>
</div>