대충 만듬....
<!DOCTYPE>
<HTML>
<HEAD>
<TITLE> Div Resize </TITLE>
<script type="text/javascript" src="./js/jquery-1.9.0.min.js"></script>
<style>
div { border : 1px solid #ccc }
#row1 div {
position: absolute;
}
#row2 div {
position: absolute;
}
</style>
<script>
$(window).load(function(){
setSize();
});
$(window).resize(function(){
setSize();
});
function setSize() {
var cellLeft = null;
var rowHeight = null;
var rowTop = 0;
var rowWidth = $('#row1').innerWidth();
var rowNum = $("#wrapper").children().length;
var divNum = $("#row1").children().length;
for ( r = 1; r <= rowNum ; r++ )
{
cellLeft = 0;
$('#row'+r+' .quarter').css({'width':rowWidth/4} );
$('#row'+r+' .half').css({'width':rowWidth/2} );
for ( i = 1; i <= divNum ; i++ )
{
cellWidth = $('#row'+r+' .cell' + i).width();
$('#row'+r+' .cell'+i).css({left:cellLeft, top: rowTop});
cellLeft += cellWidth;
}
rowHeight = $('#row'+r+' .cell1').height();
rowTop += rowHeight;
}
}
</script>
</HEAD>
<BODY id ="body">
<div id="wrapper">
<div id="row1">
<div class="cell1 quarter">
<img class="quarter" src="11.jpg">
</div>
<div class="cell2 quarter">
<img class="quarter" src="22.jpg">
</div>
<div class="cell3 half">
<img class="half" src="33.jpg">
</div>
</div>
<div id="row2">
<div class="cell1 quarter">
<img class="quarter" src="11.jpg">
</div>
<div class="cell2 half">
<img class="half" src="33.jpg">
</div>
<div class="cell3 quarter">
<img class="quarter" src="22.jpg">
</div>
</div>
</div>
</BODY>
</HTML>
