Javascript 想要以适当的方式排列css div吗

请，请回答/帮助我

我有三个带有CSS的

div

s，它是动态生成的

我称它们为

wincontainer

，

smalldiv

和

largediv

wincontainer

是一个包含

smalldiv

和

largediv

的容器，如图所示

div的属性s

<!-- wincontainer -->
<ol class="wincontainer" style="width: 938px;float: left;border: 2px solid #CCC;"></ol>

<!-- smalldiv -->
<div id="smalldiv" style="
     width: 420px;
     margin: 10px;
     margin-top: 10px;
     background-color: #ffffff;
     font-size: 13px;    
     text-align: justify;
     word-wrap: break-word;
     font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;    
     border: 1px solid #BFBFBF;    
     float: right;
     clear: right;"> </div>

<!-- largediv -->
<div id="largediv" style="
     width: 408px;
     margin: 10px;
     margin-top: 10px;
     background-color: #ffffff;
     font-size: 13px;
     min-height: 50px;
     text-align: justify;
     word-wrap: break-word;
     font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
     box-shadow: 0px 1px 1px #CCC;
     border: 1px solid #BFBFBF;
     -moz-border-radius: 3px;
     -webkit-border-radius: 3px;">

正如我们可以看到的，我们有2个

largediv

s和4个

smalldiv

s，它们是动态生成的

问题：我想以适当的方式安排大小div。就像这幅画一样。图（1）。但它们的到来就像图（2）

---

正如我所说，我不能创建子包装，因为它们是动态生成的，非常重要的串行方式…如果我创建子包装，那么它就不能是串行方式

注意：我不能再制作一个特殊的div来包含

smalldiv

或

largediv

来分隔它，因为这个小div和大div是串行的，所以我们不能将它们放在一个特殊的容器中，它们是动态的

在JSFIDDLE->中，当您删除最上面的smalldiv时，它将正常工作，但当您在上面添加smalldiv时，它会变得疯狂。。我想修复它，并使它在无限div正确的方式

---

div可以是largediv，也可以是smalldiv，每个div都有一个可变的数字，并且可以以任何顺序出现。所有largediv和smalldiv都包含在wincontainer中。不允许附加标记

我没有在类似的情况下尝试过，但您可以在largediv和smalldiv上设置显示：内联块。也许这样就行了

---

编辑：并删除浮动属性。但是现在我想，根据div的顺序，这不是最好的解决方案。

这里有一个需要JavaScript的选项：

$（文档）.ready（函数（）{
var containerTop=$（'.container'）[0]。offsetTop，
lpos=容器顶部，
rpos=集装箱码头；
$（'.container>div'）。每个（函数（）{
var$el=$（此），
el=$el[0]；
如果（$el.hasClass（'large'））{
如果（lpos<高程偏移）{
$el.css（'margin-top'，（lpos-el.offsetTop）+“px”）；
}
lpos+=$el.height（）；
}else if（$el.hasClass（'small'））{
如果（RPO<标高偏移）{
$el.css（'margin-top'，（RPO-el.offsetTop）+“px”）；
}
RPO+=$el.height（）；
}
});
});
.container{
}
.container>div{
宽度：50%；
框大小：边框框；
位置：相对位置；
}
.集装箱.大的{
高度：400px；
显示：内联块；
浮动：左；
清除：左；
位置：相对位置；
}
.集装箱，小的{
高度：150像素；
显示：内联块；
浮动：对；
清楚:对,；
位置：相对位置；
}
.red{背景色：red}
.blue{背景色：blue}
.green{背景色：绿色}
.yellow{背景色：黄色}
.purple{背景色：紫色}
.orange{背景色：orange}
您需要将id更改为动态div上的类，然后将代码布局为按div顺序流动

你的css和html非常有效

看到小提琴了吗



测试
测试
测试
测试
测试

测试测试
测试
测试
测试

测试
测试
测试
测试
#容器{
宽度：500px
}
#右包装{
浮动：对；
宽度：35%；
}
#左包装{
浮动：左；
宽度：55%；
}
.大{
背景：灰色；
边缘底部：10px；
}
.small{
背景：灰色；
边缘底部：10px；
}
我用您提供的信息创建了一个js文件，并对大div的边距进行了一个小的编辑，布局看起来就像您希望的那样

以下是一个例子：

我修改了保证金如下：

#largediv { 
    margin: 10px 30px 30px; 
}

出于某种原因，后续的上边距没有覆盖原始声明。如果对你有效，请告诉我。否则，我们可能需要有关div内容的更多信息
 我理解你的问题，我努力解决你的问题。您可以使用此代码。它正在工作


HTML代码

<div id="main">
<div id="one"></div>
<div id="two"></div>

<div id="three"></div>
<div id="four"></div>
<div id="five"></div>
<div id="six"></div>
</div>

结果：

#main
{
    height:410px;
    width:450px;
    border:5px solid black;
}

#one
{
    height:150px;
    width:150px;
    background-color:red;
    border:5px solid black;
    position:relative;
    margin-left:20px;
    margin-top:20px;
}
#two
{
    height:150px;
    width:150px;
    background-color:green;
    border:5px solid black;
    margin-top:20px;
    position:relative;
    float:left;
    margin-left:20px;
    margin-top:20px;
}
#three
{
    height:60px;
    width:200px;
    background-color:blue;
    border:5px solid black;
    margin-left:20px;
    margin-top:10px;
    position:relative;
    float:left;
    display:table-cell;
    margin-top:-160px;
}

#four
{
    height:60px;
    width:200px;
    background-color:gold;
    border:5px solid black;
    margin-left:20px;
    margin-top:10px;
    position:relative;
    float:left;
    display:table-cell;
    margin-top:-60px;
}

#five
{
    height:60px;
    width:200px;
    background-color:purple;
    border:5px solid black;
    position:relative;
    float:left;
    display:table-cell;
    margin-top:40px;
    margin-left:-210px;
}

#six
{
    height:60px;
    width:200px;
    background-color:gray;
    border:5px solid black;
    margin-left:-210px;
    margin-top:140px;
    position:relative;
    float:left;
    display:table-cell;
}

我认为内联块不是这里的解决方案。PS-不起作用：（如我所说，我无法创建子包装，因为它们是动态和串行生成的…如果我创建子包装，那么它就无法串行生成..明白吗？我道歉。我将测试其他内容并修改我的答案。请看问题中的JSFIDLE示例，您可能会帮我解决这个问题。好的，我修改了答案。让我知道这是否有帮助，以及C完成您想要的。为什么wincontainer使用有序列表（ol）标记？@user319940 ohh如果我将其重命名为“div”并不重要，结果将是相同的创建一个JSFIDLE，代码的外观完全相同，我相信您会得到更多帮助。您需要支持哪些浏览器？如果您只需要现代浏览器（而不是IE9或之前的浏览器），那么flexbox我建议试试flexbox。@Blowski google chrome。。正如我所说的，我不能创建子包装，因为它们是动态生成的，而且非常重要。如果我制作子包装，那么它就不能以串行方式生成。明白了吗？谁说要创建子包装？Andrew。。正如我所说，它是动态生成的，所以任何大div或小div的div都会在任何时候出现如果我在你的html内容中加入这样的css呢？请尝试一下并查看结果-->`
`正如我说的，它是动态生成的，所以我们不能假设哪个会先出现..小div或大div任何div都会出现，因为se它是动态的..Ps-将你的div“one”添加到最后，然后看到它也会变得疯狂：(
#main
{
    height:410px;
    width:450px;
    border:5px solid black;
}

#one
{
    height:150px;
    width:150px;
    background-color:red;
    border:5px solid black;
    position:relative;
    margin-left:20px;
    margin-top:20px;
}
#two
{
    height:150px;
    width:150px;
    background-color:green;
    border:5px solid black;
    margin-top:20px;
    position:relative;
    float:left;
    margin-left:20px;
    margin-top:20px;
}
#three
{
    height:60px;
    width:200px;
    background-color:blue;
    border:5px solid black;
    margin-left:20px;
    margin-top:10px;
    position:relative;
    float:left;
    display:table-cell;
    margin-top:-160px;
}

#four
{
    height:60px;
    width:200px;
    background-color:gold;
    border:5px solid black;
    margin-left:20px;
    margin-top:10px;
    position:relative;
    float:left;
    display:table-cell;
    margin-top:-60px;
}

#five
{
    height:60px;
    width:200px;
    background-color:purple;
    border:5px solid black;
    position:relative;
    float:left;
    display:table-cell;
    margin-top:40px;
    margin-left:-210px;
}

#six
{
    height:60px;
    width:200px;
    background-color:gray;
    border:5px solid black;
    margin-left:-210px;
    margin-top:140px;
    position:relative;
    float:left;
    display:table-cell;
}