div "container"(950px)에 div의 배경색을 채우는 방법

많은 웹 사이트에 950px 너비의 컨테이너가 있고 일부 링크가 포함 된 컨테이너가 있으며 컨테이너의 여백에 맞춰져 있습니다 . 헤더에는 컨테이너의 모든 영역을 채우는 배경색도 있으며, 그렇게하려면 내가 원하는 것도 있습니다. 아마도 잘 설명하지 못했을 것입니다. 예를 들어 보겠습니다. StackOverflow에는 "질문", "잡", "문서", "태그" "사용자"와 같은 링크가있는 "헤더"가 있으며 컨테이너와 정렬되지만 배경색이 컨테이너 밖으로 영역을 채 웁니다. 내 질문은 div/컨테이너 위에 펼쳐진 배경 색상 및 컨테이너와 일치하는 텍스트/링크가있는 동일한 머리글 "레이아웃"을 얻는 방법입니다.div "container"(950px)에 div의 배경색을 채우는 방법

HTML 코드

<body><div class="container"> 

     <div class="switcher"> 
     <div class="platform-switcher"> 

      <div id="pc-switcher"><img src="pc-logo.png"> PC Games</div> 
      <div id="xbox-switcher"><img src="xbox-logo.png"> Xbox</div> 
      <div id="ps4-switcher"><img src="ps4-logo.png"> PS4</div> 

     </div> 
     <div class="flags"> 
      <div class="language"></div> 
      <div class="currency"></div> 
     </div> 
    </div> 


     <div id="search"> 
      <form id="search-form"> 
       <input type="text" id="searchbar"> 
      </form> 
     </div> 
</body>

CSS 코드

내가 원하는 것은 "용기"에서 ".platform-스위처"의 사업부의 배경 색상을 스트레칭과에 정렬 유지하는 것입니다

.container { 
    width: 950px; 
    margin: 0 auto; 
} 

.platform-switcher { 
    background-color: black; 
    height: 40px; 
    display: inline-block; 
} 

#search-form { 
    float: right; 
} 

.platform-switcher div { 

} 

#pc-switcher { 
    color: #cc5a00; 
    height: 17px; 
    padding-left: 29px; 
    padding-top: 12px; 
    padding-right: 18px; 
    font-weight: bold; 
    float: left; 
    font-size: 11px; 
    position: relative; 
} 

#xbox-switcher { 
    color: #cc5a00; 
    height: 17px; 
    padding-left: 29px; 
    padding-top: 12px; 
    padding-right: 18px; 
    font-weight: bold; 
    float: left; 
    font-size: 11px; 
    position: relative; 
} 

#ps4-switcher { 
    color: #cc5a00; 
    height: 17px; 
    padding-left: 29px; 
    padding-top: 12px; 
    padding-right: 18px; 
    font-weight: bold; 
    float: left; 
    font-size: 11px; 
    position: relative; 
}

컨테이너, "플랫폼 - 스위처"콘텐츠 (PC 게임/Xbox 등 ...).

출처

2017-05-18 The_Wolf

@cfnerd 그것은 일 : –

(당신이 원하는 DIV이 추가) 풀 width "요소는"컨테이너 "또는"뷰포트 "또는"내용 "너비를 정의하는 요소를 래핑합니다. 여기에 예제가 있습니다.

* { 
 
    margin:0;padding:0; 
 
    box-sizing:border-box; 
 
} 
 
header,footer { 
 
    background: black; 
 
    color: white; 
 
} 
 

 
.viewport { 
 
    width: 90%; 
 
    margin:auto; 
 
    max-width: 960px; 
 
    padding:2em 0; 
 
}

<header> 
 
    <div class="viewport"> 
 
    header 
 
    </div> 
 
</header> 
 

 
<main class="viewport"> 
 
    content 
 
</main> 
 

 
<footer> 
 
    <p class="viewport">footer</p> 
 
</footer>

출처

2017-05-18 16:43:35

을 추가, 감사합니다! :) –

내가 이해한다면 나도 몰라하지만 난 시도 : D

이 시도 : 내가 이해한다면, 당신은 할

background-color: red; 
width: 100%; 
border-bottom: 1px solid grey; */ for the border */ 
z-index: 999;

출처

2017-05-18 16:28:50 Lafa

div "container"(950px)에 div의 배경색을 채우는 방법

답변

관련 문제