html - 调整浏览器大小时， float Div 按列排序而不是按行排序

Question

在此先感谢您的帮助。我是div菜鸟!

我有以下 div 场景:

<div id="OuterContainer" style="float:left; width:100%">
    <div style="width:200px; float:left">Amy</div>
    <div style="width:200px; float:left">Bob</div>
    <div style="width:200px; float:left">Carl</div>
    <div style="width:200px; float:left">Dan</div>
    <div style="width:200px; float:left">Edith</div>
    <div style="width:200px; float:left">Fran</div>
    <div style="width:200px; float:left">Gary</div>
    <div style="width:200px; float:left">Howard</div>
</div>

如果我调整浏览器的宽度，我会得到我想要的预期的响应式设计，但我希望 div 保持在它们首先在列级别声明的顺序，然后在行级别声明。

这就是我现在得到的，其中 div 的排序是横向的，然后是向下的:

但期望的结果是先对每一列进行排序，然后再对下一列进行排序，如下所示:

我已经尝试更改 float、clear、display 等的 css 声明。我不知道我会提前拥有多少个内部 div。内部 div 在 C# 中生成为字符串，然后作为文字注入(inject)外部 div。外部 div 在 HTML 标记中声明，当页面使用隐藏代码加载时，内部 div 作为文本添加到该 div 中。

再次感谢...

Answer 1

您需要创建列:

<div id="OuterContainer" style="float:left; width:100%">
    <div style="width:200px; float:left">
        <div style="width:200px; float:left">Amy</div>
        <div style="width:200px; float:left">Bob</div>
        <div style="width:200px; float:left">Carl</div>
    </div>
    <div style="width:200px; float:left">
        <div style="width:200px; float:left">Dan</div>
        <div style="width:200px; float:left">Edith</div>
        <div style="width:200px; float:left">Fran</div>
    </div>

    <div style="width:200px; float:left">
        <div style="width:200px; float:left">Gary</div>
        <div style="width:200px; float:left">Howard</div>
    </div>
</div>