如何在我的內嵌塊JavaScript div之間添加換行符？

我的目標是使用html/javascript在一個大型變量網格中顯示切片。我設法用下面的代碼在內聯塊中顯示div，但我似乎無法獲得換行符。例如，在每10個瓷磚之後，我想要開始一個新行。這將創建一個10×10的網格。如何在我的內嵌塊JavaScript div之間添加換行符？

function cdiv() { 
    var div = document.createElement("div"); 
    div.style.width = "100px"; 
    div.style.height = "100px"; 
    div.style.background = "red"; 
    div.style.color = "white"; 
    div.style.display = "inline-block" 
    div.innerHTML = 'hello'; 

    document.body.appendChild(div); 
} 

for (i = 0; i < 10; i++) { 

    for (b = 0; b < 10; b++) { 
    cdiv(); 
    } 
}

我會很感激獎金提示，以便如何給這些div的每一個獨特的ID進一步修補。

來源

2016-06-08 hac13

'document.body.appendChild（document.createElement（「br」））'？ https://jsfiddle.net/45381qx9/ – 2016-06-08 02:02:34

我和你現在的代碼完全一樣，但它不適合我。你的是完美的。 https://jsfiddle.net/45381qx9/ – hac13

這可以用css完成 – charlietfl

內環之後，附加一個斷開線「BR」

for (i = 0; i < 10; i++) { 
    for (b = 0; b < 10; b++) { 
    cdiv(); 
    } 
    //Append line break here...  
    document.body.appendChild(document.createElement("br")); //Thanks Squint hint as well 
}

來源

2016-06-08 02:14:58 Sami

<html> 
 
<head> 
 
    <script> 
 
function cdiv() { 
 
    var div = document.createElement("div"); 
 
    div.style.width = "100px"; 
 
    div.style.height = "100px"; 
 
    div.style.background = "red"; 
 
    div.style.color = "white"; 
 
    div.style.display = "inline-block" 
 
    div.innerHTML = 'hello'; 
 

 
    document.body.appendChild(div); 
 
    
 
} 
 
</script> 
 
    </head> 
 
    <body> 
 
    <script> 
 
for (i = 0; i < 10; i++) { 
 
document.body.appendChild(document.createElement("br")); 
 
    for (b = 0; b < 10; b++) { 
 
cdiv(); 
 
} 
 
} 
 
</script> 
 
    </body> 
 
    </html>

document.body.appendChild(document.createElement("br"));使用這條線在你的第一個循環加休息。

來源

2016-06-08 02:12:20

我試過，因爲@squint上面已經建議，但它沒有奏效。他的方法是在內部循環完成後添加斷點線的地方 – hac13

一種方法是封裝所有的div在具有每格的寬度的10倍的容器。請參考下面的代碼和這個小提琴。 https://jsfiddle.net/5uc2nc3p/2/

function cdiv(ele) { 
    var div = document.createElement("div"); 
    div.style.width = "100px"; 
    div.style.height = "100px"; 
    div.style.background = "red"; 
    div.style.color = "white"; 
    div.style.display = "inline-block" 
    div.innerHTML = 'hello'; 

ele.appendChild(div); 
} 

var div = document.createElement("div"); 
div.style.width = "1000px"; ///10 times of inner divs 
div.style["overflow-y"]= "visible"; // to show overflow 
document.body.appendChild(div); 
for (i = 0; i < 10; i++) { 
    for (b = 0; b < 10; b++) { 
    cdiv(div); 
    } 
}

來源

2016-06-08 02:21:13 Don

在jfiddle上，我看到這些圖塊水平延伸過頁面視圖，這正是我想要的。但是，當我在我的索引文件中嘗試大量拼貼並用chrome打開它時，我沒有發生滾動。相反，我會看到適合我的頁面的瓷磚線，不會越過它。我希望有一個完美的方格。 – hac13

你有沒有嘗試設置溢出到可見的容器div或身體？ – Don

對不起，我不知道該怎麼做，但現在正在尋找。如果你有一個很好的鏈接，我會很感激 – hac13

如何在我的內嵌塊JavaScript div之間添加換行符？

回答

相關問題