想要以正確的方式安排css div

Question

請，請回答/幫助我。

我有三個div與CSS，它是動態生成的。

而且我稱它們爲wincontainer,smalldiv和largediv。我們可以在圖像中看到wincontainer是一個容器smalldiv和largediv。的div小號

<!-- 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的動態生成尚未

問：我想以適當的方式安排小型和大型股利。就像這張照片一樣。圖。1）。但他們來了一樣，如圖（2）

正如我所說的，我不能創建子包裝，因爲它們是動態的和非常重要的串行明智的產生......如果我讓subwrapper那麼它不能在連續明智

注意：我不能讓另一個特殊的div來包含smalldiv或largediv來分開它，因爲那個小的和大的div是串行的，所以我們不能把它們放在一個特殊的容器中，它們是動態的。

在的jsfiddle - >http://jsfiddle.net/jwy3c3n5/當你刪除上最smalldiv然後它會正常工作，但是當你添加smalldiv在上面它是瘋了..我想在無限div來解決它，使之有道

一個div將會是largediv或者smalldiv，每個div可能會有一個可變數量，並且可能以任何順序出現。所有largediv和smalldiv都包含在wincontainer中。額外的標記是不允許的。

Answer 1

我還沒有在類似的stituation中試過這個，但是你可以設置display：inline-block on largediv and smalldiv。也許這會做到。

編輯：並刪除浮動屬性。但現在我想到了，取決於div的順序，這不可能是最好的解決方案。

Answer 2

下面是需要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>

注：我認爲這將是最好使用一個div爲貴 「wincontainer」 不是一個有序列表。

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-撥弄着您所提供的信息，再加上保證金的大格一個小編輯和佈局似乎表現你想要的方式。

這裏是例子：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; 
} 

結果：