output editor render

by jpeter06

HTML

<div class="main">
    <div style="width: 12.5%; height: 12.5%; top: 0%; left: 0%;">1</div>
    <div style="width: 12.5%; height: 12.5%; top: 12.5%; left: 0%;">2</div>
    <div style="width: 12.5%; height: 12.5%; top: 0%; left: 12.5%;">3</div>
    <div style="width: 12.5%; height: 12.5%; top: 12.5%; left: 12.5%;">4</div>
    <div style="width: 25%; height: 25%; top: 0%; left: 25%;">5</div>
    <div style="width: 50%; height: 25%; top: 25%; left: 0%;">6</div>
    <div style="width: 50%; height: 25%; top: 0%; left: 50%;">7</div>
    <div style="width: 50%; height: 25%; top: 25%; left: 50%;">8</div>
    <div style="width: 50%; height: 50%; top: 50%; left: 0%;">9</div>
    <div style="width: 50%; height: 50%; top: 50%; left: 50%;">10</div>
</div>

CSS

html, body{
    margin:0px;
    padding:0px;
    width:100%;
    height:100%;
}

.main{
    width:80%;
    height:80%;
    background: blue;
}

div { display:inline-block;  border:0px solid  black; position:absolute; }


.left { float:left;}
.green { background:green;}
.blue { background:blue;}
.orange{ background:orange;}
.rojo { background:#f00}
.c2 { background:#0ff}

JavaScript

$(function(){
    $('div','.main').each(        
        function(index){
            var colors=['green','blue','orange','rojo','c2'];
            $(this).addClass(colors[index%colors.length])}
    );
    
});