html - 尝试将三个垂直框 float 到一个大框的右侧

Question

我正在处理一些 html/css，我试图正确布局，但我不明白为什么它不起作用。

我想要一个大的主区域和三个垂直堆叠在其右侧的较小区域 - 但在较窄的页面上，三个框然后环绕在主区域下方。

我有以下代码，我认为它应该可以工作，但它只让一个较小的盒子显示在侧面 - 其他两个留在主盒子下面，我不明白为什么!

我的代码只是测试代码来尝试让它工作，如下所示:

<div style="width:650px; height:900px; margin:25px; display:inline-block; background:yellow;"></div>

<div style="width:250px; height:250px; margin:25px; display:inline-block; background:blue;"></div>

<div style="width:250px; height:250px; margin:25px; display:inline-block; background:blue;"></div>

<div style="width:250px; height:250px; margin:25px; display:inline-block; background:blue;"></div>

所有的css都是内联的，只是作为一个简单的测试。

这给出了以下布局，具体取决于浏览器宽度。

在一个宽窗口上，我希望三个盒子堆叠在右边......

在更窄的窗口上......

这是我所期望的。这只是第一个布局，当窗口足够宽以让 div 并排显示时，我希望三个蓝色框垂直堆叠。

谁能看出为什么这不像我预期的那样工作？

Answer 1

使用 float 属性来强制对齐您正在寻找的可能很麻烦。我使用 display:flex 和其他特定于 flex 的属性重新编写了您的代码。查看 working pen .

基本上，您需要将三个小 div 包装在另一个 div 中。将 display:flex 应用到包装器 div，并应用到包含所有内容的外部 div(在我的 Pen 中，我只是做了整个主体)。然后，为了使所有内容对齐，您可以在外部 div(例如主体)和内部 div 上使用 justify-content:center拿着三个蓝色方 block 。

如果你不熟悉 flexbox，MDN 有 a good tutorial .