Код jQuery для заполнения всего тела '.'

Question

Я попытался заполнить весь документ HTML документа «.» (Точка). Так что мой HTML-документ выглядит как сетка. Вот что я достиг: jsFiddle Когда я изменяю display:block в дочернем классе, все точки получаются по вертикали. Я хочу получить квадратную сетку точек, которые охватывают весь текст документа HTML с каждой точкой внутри дочернего класса. Могу ли я это сделать?

HTML

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

JQuery

$(document).ready(function() { 
    for (var i = 0; i < 1000; i++) { 
    $("#main").append("<div class='child'>.</div>"); 
    } 
}); 

CSS

body, 
html { 
    width: 100%; 
    height: 100%; 
} 
#main { 
    width: 100%; 
    height: 100%; 
} 
.child { 
    width: 2px; 
    height: 2px; 
    display: inline; 
} 

Answer 1

Попробуйте установить его как встроенный блок.

Обратите внимание, что для этого может потребоваться больше узлов, чем 1000. Лучше установить #main с фоновым изображением точки и повторить его. Он будет иметь лучшую производительность (если вам не нужно что-то делать с точками).

Answer 2

Добавить float: left;

.child{ 
    width:2px; 
    height:2px; 
    float: left; 
} 

См. here.

Answer 3

Проблема в том, что все ваши точки отображаются как одно длинное слово. Таким образом, вы должны установить перенос слов, который хорошо поддерживается в соответствии с этой статьей: http://www.impressivewebs.com/word-wrap-css3/

Вот исправление: CSS

body, html { 
    width:100%; 
    height:100%; 
} 
#main{ 
    width:100%; 
    height:100%; 
    word-wrap: break-word; 
    line-height: 4px; /* optional */ 
} 

JQuery

$(document).ready(function(){ 
    for(var i=0;i<1000;i++){ 
     $("#main").append("."); 
    } 
});