在for循環中並排放置div - CSS樣式

-2

我在for循環中創建div並將它們放置在文檔上。 2個div應並排放置，下面2個div放在其下面等等。在for循環中並排放置div - CSS樣式

有人可以建議我這種情況下的CSS樣式嗎？這裏是我的代碼

for (var i = 0; i < piechartDataArray.length; i++) { 

     var elementID = 'piechart' + (i+1).toString(); 
     var element = document.createElement('div'); 
     element.id = elementID; 
     document.body.appendChild(element); 

     if (i%2 == 0) { 
      document.getElementById(elementID).style.width=...     
    }else{ 
     document.getElementById(elementID).style.width=... 
     } 
}

來源

2015-02-24 Siddharthan Asokan

什麼是JavaScript的有與你的CSS佈局的問題呢？ – isherwood 2015-02-24 03:52:20

所以...基本上你問如何在CSS中做兩列布局？ – chrissr 2015-02-24 03:53:32

他想創造一些不同於其他人的東西 – 2015-02-24 03:53:40

假設下面的HTML結構：

<div class="some-class"></div> 
<div class="some-class"></div> 
<div class="some-class"></div> 
<div class="some-class"></div>

並承擔本所需的佈局：

| | | 
------- 
| | |

我會用這個CSS：

div.some-class { 
    display: inline-block; 
    width: 50%; 
}

來源

2015-02-24 03:54:46 isherwood

通過這種方法，我認爲他不需要關心他在其他塊中應用的條件。如果我沒有錯，CSS會照顧它。 – VPK 2015-02-24 04:11:02

對於每個d四，設置寬度爲50％和float：左

來源

2015-02-24 03:57:10

花車應該是最後的選擇。他們會解決很多問題。閱讀更多：http://www.sitepoint.com/give-floats-the-flick-in-css-layouts – isherwood 2015-02-24 14:20:02

或者，你可以使用CSS3列方法：

piechartDataArray = [1,2,3,4]; 
 

 
for (var i = 0; i < piechartDataArray.length; i++) { 
 

 
     var elementID = 'piechart' + (i+1).toString(); 
 
     var element = document.createElement('div'); 
 
     element.id = elementID; 
 
     document.getElementById('container').appendChild(element); 
 
}

div{ 
 
    background: blue; 
 
    height: 100px; 
 
    margin-bottom: 
 
} 
 

 
#container{ 
 
    -webkit-column-count: 2; 
 
    -webkit-column-gap: 10px; 
 
}

<section id="container"></section>

來源

2015-02-24 04:16:19

在for循環中並排放置div - CSS樣式

回答

相關問題