Question

考虑以下HTML和CSS。期望的结果是两个粉红色框在单个绿色框内居中。文本不居中。每个盒子的左侧和右侧都有填充物。我应该能够拥有一个或多个这样的盒子，最多可达8个;它们应该全部浮动以填充容器div。我已经连续几个星期对这个问题进行了抨击，我读过或尝试过的东西似乎都没有用 - margin：auto，display：inline等等。我在试图使用时添加了box-margin div来创建填充margin：auto，但它仍然没有得到我想要的结果。 HALP？

HTML

<body>
    <div id="page">

        <div id="main">

            <div class="box-group">

                <div class="box-margin">
                    <div class="box">
                        <h2>Data</h2>
                        <ul>
                            <li><a href="/URL">Link</a></li>
                        </ul>
                    </div>
                </div>

                <div class="box-margin">
                    <div class="box">
                        <h2>Reports</h2>
                        <ul>
                            <li><a href="/URL/">Link</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

CSS

body
{
    margin: 0;
    padding: 0;
}
#page
{
    width: 95%;
    min-width:800px;
    border: thin solid red;
}
#main
{
    padding: 30px 30px 15px 30px;
    margin-bottom: 30px;
    min-width: 875px;
    border: thin solid black;
}
.box-group
{
    width: 100%;
    padding: 10px;
    border: thin solid green;
}
.box-margin
{
    margin: auto;
    width: 275px;
    float: left;
    padding: 15px;
}
.box
{
    border: thin ridge pink;
    height: 200px;
    width: 250px;
}

Answer 1

在centered floats上查看此页面。它有一个巧妙的技巧，可能对你不起作用（它将它们作为一个组，但不是每行，如果它们包装），但它也详细说明IE中display: inline-block的修复。

Answer 2

浮子将始终粘在容器的左边缘或右边缘。您应该使用display: inline-block。

然而另一个中心DIV在其他DIV问题中

2 个答案: