Question

请，请回答/帮助我。

我有三个div用CSS，它是动态生成的。

我称他们为wincontainer，smalldiv和largediv。我们可以在图片中看到wincontainer是smalldiv和largediv的容器。

enter image description here

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和4 smalldiv s是动态生成的

问题：我想以适当的方式安排小型和大型div。就像这张照片。图。1）。但它们就像图（2）

一样

正如我所说的，我无法创建子包装器，因为它们是动态且非常重要的串行生成...如果我制作子包装器然后它不能顺序连接

注意：我无法创建另一个特殊div来包含smalldiv或largediv来分隔它，因为那个小而大的div是串行方式所以我们不能把它们放在一个特殊的容器中，它们是动态的。

在JSFIDDLE中 - ＆gt; http://jsfiddle.net/jwy3c3n5/当你删除最上面的smalldiv然后它会工作正常但是当你在上面添加smalldiv时它会发疯...我想修复它并在无限的div中使它成为正确的方式

div将是largediv或smalldiv，每个div可以有一个可变数量，并且可以按任何顺序出现。所有largediv和smalldiv都包含在wincontainer中。不允许使用其他标记。

5 个答案:

答案 0 :(得分：2)

答案 1 :(得分：0)

答案 2 :(得分：0)

答案 3 :(得分：0)

答案 4 :(得分：-1)

Answer 1

这是一个需要JavaScript的选项：

$(document).ready(function(){
    var containerTop = $('.container')[0].offsetTop,
        lpos = containerTop,
        rpos = containerTop;
    $('.container > div').each(function(){
        var $el = $(this),
            el = $el[0];
        if($el.hasClass('large')){
            if(lpos < el.offsetTop){
                $el.css('margin-top', (lpos - el.offsetTop) + "px");
            }
            lpos += $el.height();
        }else if($el.hasClass('small')){
            if(rpos < el.offsetTop){
                $el.css('margin-top', (rpos - el.offsetTop) + "px");
            }
            rpos += $el.height();
        }
        
    });
});

.container{
    
}
.container > div{
    width:50%;
    box-sizing:border-box;
    position:relative;
}
.container .large{
    height:400px;
    display:inline-block;
    float:left;
    clear:left;
    position:relative;
}
.container .small{
    height:150px;
    display:inline-block;
    float:right;
    clear:right;
    position:relative;
}

.red{background-color:red}
.blue{background-color:blue}
.green{background-color:green}
.yellow{background-color:yellow}
.purple{background-color:purple}
.orange{background-color:orange}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
    
    <div class='large red'></div>
    <div class='small blue'></div>
    <div class='small green'></div>
    <div class='large yellow'></div>
    <div class='small purple'></div>
    <div class='small orange'></div>    
    
</div>

注意：我认为最好为你的“wincontainer”使用div而不是有序列表。

Answer 2

我没有在类似的情况下尝试过这个，但你可以在largediv和smalldiv上设置 display：inline-block 。也许就是这样。

编辑：并删除float属性。但是现在我考虑一下，根据div的顺序，这可能不是最好的解决方案。

Answer 3

您需要将id更改为动态div上的类，然后将代码布局为按div顺序流动。

你的css和html非常有用。

看小提琴

http://jsfiddle.net/jwy3c3n5/2/

<div id="container">
    <div id="leftwrapper">
        <div class="large">test<br />test<br />test<br />test<br />test<br /></div>
        <div class="large">testtest<br />test<br />test<br />test<br /></div>
    </div>
    <div id="rightwrapper">
        <div class="small">test</div>
        <div class="small">test</div>
        <div class="small">test</div>
        <div class="small">test</div>
    </div>
</div>


#container {
    width: 500px
}
#rightwrapper {
    float: right;
    width: 35%;
}
#leftwrapper {
    float: left;
    width: 55%;
}
.large {
    background: gray;
    margin-bottom:10px;    
}
.small{ 
    background: gray; 
    margin-bottom:10px;
}

Answer 4

我创建了一个js-fiddle，其中包含您提供的信息，以及对大div的边距的小编辑，并且布局似乎按照您希望的方式运行。

以下是示例：http://jsfiddle.net/uaeb0Lmv/

我修改了边距：

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

出于某种原因，后续的上边距并没有覆盖原始声明。如果这对您有用，请告诉我。否则，我们可能需要有关div内容的更多信息。

Answer 5

我理解你的问题，我试着解决你的问题。您可以使用此代码。它正在发挥作用。

Live Working Demo

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>

CSS代码：

#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;
}

<强>结果：

result

想以适当的方式安排css div

5 个答案: