Question

我在页面布局方面遇到问题，并希望得到一些帮助。这就是我想要的：

enter image description here

如果浏览器的宽度减小，那么第3个灰色div应该下降（强制最后一个也下拉），结果如下：

enter image description here

因此绿色容器应尽可能多地显示灰色内部容器，同时缩小其宽度并使其自身居中。

我当前的代码接近我想要的，因为当页面调整大小时灰色div下降，但问题是灰色div是居中的（使它们在底行中彼此不对齐），使输出看起来像这样：

enter image description here

虽然我希望它看起来像这样：

enter image description here

JSFIDDLE：http://jsfiddle.net/2S7gz/5/

如何实现这一目标？

当前HTML：

<div class="body">
    <div class="outerContainer">
        <div class="innerContainer">
            inner container
        </div>

        <div class="innerContainer">
            inner container
        </div>

        <div class="innerContainer">
            inner container
        </div>    

        <div class="innerContainer">
            inner container
        </div>   

        <div class="innerContainer">
            inner container
        </div>   
    </div>
</div>

CSS：

.body {
    background-color: #fee;
    text-align: center;
    padding: 25px;
}

.outerContainer {
    background-color: #efe;
    display: inline-block;
}

.innerContainer {
    display: inline-block;
    width: 200px;
    height: 200px;
    margin: 10px;
    background-color: #f1f1f1;
}

Answer 1

我转移了一些东西。这个可以吗？基本上，我将容器div更改为span元素，并给它一个固定的宽度。（你提到盒子总是宽度相同）

这是jsfiddle。

编辑：Here我做了一些额外的事情。

您无法保证：自动将设置为max-width和display:inline-block的div居中，但您可以使用text-align:center - 所有主流浏览器都能识别。通过这样做，我们将div集中在一起，同时保持其流动性的完整性。我们也避免使用表格。如果浏览器大小太小，较小的div将“跳”并且容器将调整大小。为避免将所有文字居中，我们已将text-align:left添加到outerContainer。

基本上，这里的答案是text-align:center和max-width。这种组合是你追求的金色。

Answer 2

这是一个特别困难的问题，因为在经过多次调整后不断重新调整div的内部内容的唯一方法可能是需要JQuery或JavaScript解决方案。但是，如果你只是希望能够调整宽度，同时使内容保持一定的对齐，那么这可能是解决方案。

DEMO

让我们来看看使用的CSS：

.outerContainer {
    /* max-width: 100%; */ /* This can also be used */
    width: auto; /*creates that fluidity */
    margin: 25px;
    background-color: #efe;
    display: inline-block;
}

看看上面的评论，我们注意到宽度是自动的。 MDN声明自动表示'The browser will calculate and select a width for the specified element.'。这很有用，因为它允许您不再需要固定宽度的概念。

我还使用display: table-cell;做了一点居中，它允许div作为一种类型的td，当与vertical-align:middle;合作时，它会相应地将所有内容放在框中。这可以在你最方便的div中找到，你可以方便地命名为“body”。

我还可以告诉你，可能有一个JavaScript解决方案能够在div增长或缩小时重新定位所有内容（不放大或缩小，反之亦然），这是因为JavaScript是浏览器或客户端脚本语言，这意味着它将允许浏览器更新而不将信号发送回服务器并刷新页面（与其他语言，如Perl，Ruby或Php相反）。

话虽如此，您可能需要找到一个JavaScript解决方案来重新定位div中的所有内容（如果这是您的主要目标），但是使用纯CSS，这样就可以在不修复所有内容的情况下获得内在的div。

我的最后一点是，定位相对......危险，因为它可以在窗口放大和缩小后继续保持移动。如果你希望事情保持绝对静止或稍微接近，我会建议使用float变量来保存或确保事情到位并使用MDN的另一个定义，它指出所有左浮动must float on the left side of its containing block和所有右浮动must float on the right side of its containing block。

如何在保持容器左对齐的同时缩小容器并使其居中？

2 个答案: