提前感谢您的帮助。我是一名新秀!
我有以下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的排序然后是:
但是,期望的结果是首先将每列排序,然后排到下一列,如下所示:
我已尝试更改浮动,清除,显示等的css声明。我不知道我将提前有多少内部div。内部div在C#中生成为一个字符串,然后作为文字注入外部div。外部div在HTML标记中声明,当使用代码加载页面时,内部div被添加为该div中的文字。
再次感谢...
答案 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>