div의 너비를 래퍼와 동일하게 유지하지만 배경을 전체 너비로 만듭니다.

Question

이미지는 내가 성취하려는 것을 보여줍니다. 3 개 div는 모두 800px 래퍼에 포함되어 있습니다. 그러나 두 번째 div의 배경은 본문의 전체 너비를 확장합니다. 이 작업을 수행 할 수

Answer 1

내가 patkay에 의한 것과 거의 identitical 해결책을 가지고 있습니다.

내 HTML :

이

<div class="outer-wrapper"> 
    <div class="inner-wrapper"> 
     <div class="content">Content 1...</div> 
    </div> 
    <div class="inner-wrapper noted"> 
     <div class="content">Content 2...</div> 
    </div> 
    <div class="inner-wrapper"> 
     <div class="content">Content 3...</div> 
    </div> 
</div> 

그리고 내 CSS :

.outer-wrapper { 
    width: 100%; 
    outline: 1px dotted blue; 
} 
.inner-wrapper { 
    width: inherit; 
} 
.inner-wrapper.noted { 
    background-color: gray; 
} 
.content { 
    width: 600px; 
    margin: 10px auto; 
    outline: 1px dotted red; 
} 

바이올린 참조 : 기본적으로 http://jsfiddle.net/audetwebdesign/Nbu7G/

, 내가 상속 후 전체 폭을 제어하는 ​​설정하고하는 .outer-wrapper를 사용하는 너비를 .inner-wrapper으로 변경하여 추가 클래스 호출 .noted을 통해 배경색을 설정하는 데 사용됩니다.

가장 안쪽에있는 컨테이너 .content의 너비는 고정되어 있습니다 (예 : 600px).

HTML5 태그를 사용하여 추가 마크 업을 의미 적으로 정리할 수 있지만이 패턴을 사용하면 배경 이미지를 사용하는 등의 많은 후크를 사용할 수 있습니다.

Answer 2

한 가지 방법은 전체 너비 배경이 서로의 상부에 적층되어, 모든 내부에 중앙 정렬 된 세 개의 사업부의의를하는 것입니다.

<div class="top"> 
    <div class="wrap"> 
     <p>Some content</p> 
    </div> 
</div> 

<div class="mid"> 
    <div class="wrap"> 
     <p>Some content</p> 
    </div> 
</div> 

<div class="bottom"> 
    <div class="wrap"> 
     <p>Some content</p> 
    </div> 
</div> 

CSS의는 다음과 같습니다

body { 
    text-align: center; 
} 

.top, .bottom { 
    background: #aaa; 
    width: 100%; 
} 

.mid { 
    background: #616161; 
    width: 100%; 
} 

.wrap { 
    width: 800px; 
    margin: 0 auto; 
    padding: 5px; 
}