浏览器调整大小时按列排序的浮动Div

时间:2018-05-03 17:53:39

标签: html css

提前感谢您的帮助。我是一名新秀!

我有以下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的排序然后是:

CURRENT

但是,期望的结果是首先将每列排序,然后排到下一列,如下所示:

DESIRED

我已尝试更改浮动,清除,显示等的css声明。我不知道我将提前有多少内部div。内部div在C#中生成为一个字符串,然后作为文字注入外部div。外部div在HTML标记中声明,当使用代码加载页面时,内部div被添加为该div中的文字。

再次感谢...

1 个答案:

答案 0 :(得分:0)

您需要创建列:

<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>