채택완료

레이아웃 질문

2017-05-28 (일) 22:47:13 4,757

wrap로 검은 부분을 묶어서 width:1200px;margin:0 auto를 했습니다.

그런데 검은색으로 묶은 영역 중에 

중간에 파란 부분처럼 1200px을 넘는 width가 필요한데요. (예를들어 2000px)

어떻게 하면 1200px로 묶인 가운데 저 부분만 2000px를 적용해야할까요?

 

wrap로 묶지 않고 각각 width를 적용하는 방법은 다른 페이지에 레이아웃에 묶여 있어서...

효율적이지 못한거 같아서...

wrap로 묶되 저 부분만 가로를 크게 주고 싶은데...

7da8ee8bd4db49580e3eab2e78fbf4ba_1495979039_3738.png
 

|

답변 3개

채택된 답변
+20 포인트
2017-05-29 (월) 01:09:18

잘은 모르지만 적용할부분에

<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사이즈로 넣으시면 될거같아요. 

2017-05-28 (일) 23:43:05
Copy
<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>

9197a0c36fe6e9453d7462bb4d0cca65_1495982565_2624.jpg 

예제 http://jsfiddle.net/4xv0cs4e/ 

2017-05-28 (일) 23:25:59

굳이 왜 파란 부분을 검은색에 포함 시키려 하시나요?

검은색을 2개로 나누면 되지 않나요?

방법은 여러가지가 있지만 어떤 방식으로 사용하시려 하시는건지 알아야

정확한 답변이 가능합니다.

사용 목적에 따라 방법은 수도 없이 많습니다. 

답변을 작성하려면 로그인이 필요합니다.