답변 3개
<style>div#wrapper { width:600px; margin:auto;}div#div1 { float:left; width:200px; height:400px; background:#F00;}div#div2 { float:left; width:200px; height:400px; }div#div2_1 { float:left; width:200px; height:200px; background:#FF0;}div#div2_2 { float:left; width:200px; height:200px; background:#0F0;}div#div4 { float:left; width:200px; height:400px; background:#00F;}</style> <div id="wrapper"> <div id="div1"></div> <div id="div2"> <div id="div2_1"></div> <div id="div2_2"></div> </div> <div id="div4"></div></div>이렇게 구성하면 될 듯 합니다.
<style type="text/css"> #wrap{width:100%;height:auto;} #wrap .section01{width:33%;height:500px;float:left;background-color:green;} #wrap .middelSectionWrap{width:33%;height:500px;float:left;} #wrap .middelSectionWrap .section02{width:33%;height:250px;background-color:orange;} #wrap .middelSectionWrap .section03{width:33%;height:250px;background-color:red;} #wrap .section04{width:33%;height:500px;float:left;background-color:blue;}</style><div id="wrap"> <div class="section01">1</div> <div class="middelSectionWrap"> <div class="section02">2</div> <div class="section03">3</div> </div> <div class="section04">4</div></div>
일반적인 방법 2가지...
입코딩이라 오류가 있을 수도...;;
공통스타일
<style>
.box {width:150px;height:300px}
.box-box {width:150px;height:150px}
#box1 {background:#8EC641}
#box2-1 {background:#f8931f}
#box2-2 {background:#ef3236}
#box3 {background:#55a8de}
</style>
공통마크업
<div id="wrap">
<div id="box1" class="box">1</div>
<div id="box2" class="box">
<div id="box2-1" class="box-box">2</div>
<div id="box2-2" class="box-box">3</div>
</div>
<div id="box3" class="box">4</div>
</div>
1. float 을 이용하는 방법
<style>
#wrap:after {display:block;visibility:hidden;clear:both;content:""}
.box {float:left}
</style>
2. position:absolute 를 이용하는 방법
<style>
#wrap {height:300px}
.box {position:absolute;top:0}
#box1 {left:0}
#box2 {left:150px}
#box3 {left:300px}
</style>
답변을 작성하려면 로그인이 필요합니다.