div 레이아웃을 만들려하는데 어렵네요...초보라 좀 가르쳐 주세요. 정보
div 레이아웃을 만들려하는데 어렵네요...초보라 좀 가르쳐 주세요.본문
댓글 전체
<style type="text/css">
.clr {clear:both; width:600px;}
.box {width:200px; float:left;}
</style>
<div class="clr">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
<div class="clr">
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
<div class="clr">
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
</div>
.clr {clear:both; width:600px;}
.box {width:200px; float:left;}
</style>
<div class="clr">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
<div class="clr">
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
<div class="clr">
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
</div>
<style type="text/css">
.wrap { width:600px; height:300px; color:white; }
.leftcolumn { float:left; width:200px; height:300px; }
.center { float:left; width:200px; height:300px; }
.rightcolumn { float:left; width:200px; height:300px; }
.test1 { width:200px; height:100px; background-color:gray;}
.test2 { width:200px; height:300px; background-color:gray; }
.test3 { width:200px; height:150px; background-color:gray; }
</style>
<div class="wrap">
<div class="leftcolumn">
<div class="test1">a1</div>
<div class="test1">a2</div>
<div class="test1">a3</div>
</div>
<div class="center">
<div class="test2">b1</div>
</div>
<div class="rightcolumn">
<div class="test3">c1</div>
<div class="test3">c2</div>
</div>
</div>
.wrap { width:600px; height:300px; color:white; }
.leftcolumn { float:left; width:200px; height:300px; }
.center { float:left; width:200px; height:300px; }
.rightcolumn { float:left; width:200px; height:300px; }
.test1 { width:200px; height:100px; background-color:gray;}
.test2 { width:200px; height:300px; background-color:gray; }
.test3 { width:200px; height:150px; background-color:gray; }
</style>
<div class="wrap">
<div class="leftcolumn">
<div class="test1">a1</div>
<div class="test1">a2</div>
<div class="test1">a3</div>
</div>
<div class="center">
<div class="test2">b1</div>
</div>
<div class="rightcolumn">
<div class="test3">c1</div>
<div class="test3">c2</div>
</div>
</div>