레이아웃 질문
본문
wrap로 검은 부분을 묶어서 width:1200px;margin:0 auto를 했습니다.
그런데 검은색으로 묶은 영역 중에
중간에 파란 부분처럼 1200px을 넘는 width가 필요한데요. (예를들어 2000px)
어떻게 하면 1200px로 묶인 가운데 저 부분만 2000px를 적용해야할까요?
wrap로 묶지 않고 각각 width를 적용하는 방법은 다른 페이지에 레이아웃에 묶여 있어서...
효율적이지 못한거 같아서...
wrap로 묶되 저 부분만 가로를 크게 주고 싶은데...
답변 3
잘은 모르지만 적용할부분에
<style>
/* 폭 100% 적용하기 */
*{padding:0px;margin:0pc}
#wrap{height:360px;/*높이 조절해야 함*/}
#wrap .inner{width:100%;position:absolute;margin:0 auto 30px;background:#f1f1f1;left:0px;}
#wrap .inner .c {margin:0 auto;width:2000px;border:1px solid #000;}
</style>
<div id="wrap">
<div class="inner">
<div class="c">
내용
</div>
</div>
</div>
레이아웃 위에 폭 100%를 적용해서 올리고 그안에 2000px사이즈로 넣으시면 될거같아요.
굳이 왜 파란 부분을 검은색에 포함 시키려 하시나요?
검은색을 2개로 나누면 되지 않나요?
방법은 여러가지가 있지만 어떤 방식으로 사용하시려 하시는건지 알아야
정확한 답변이 가능합니다.
사용 목적에 따라 방법은 수도 없이 많습니다.
<style>
.div1 {
position:relative;
width:200px;
left:50%;
margin-left:-100px;
background:#ddd;
padding:10px;
border:1px solid #000;
}
.div2 {
position:relative;
width:calc(100% - 22px);
background:#eee;
border:1px solid #000;
padding:10px;
}
.div3 {
position:relative;
width:calc(100% - 22px);
height:50px;
}
.div4 {
position:absolute;
width:300px;
height:50px;
left:50%;
margin-left:-140px;
background:#fff100;
border:1px solid #000;
}
</style>
<div class="div1">
<div class="div2">
</div>
<br>
<div class="div3">
<div class="div4">
</div>
</div>
<br>
<div class="div2">
</div>
</div>
