전체 너비 (100 %)의 부모에 고정 너비의 컨테이너를 넣으려고합니까?

Question

그래서 코딩에 익숙하지 않고 내부에 픽스 - 폭 컨테이너가 포함 된 전체 너비 (100 %) 컨테이너가있는 웹 사이트를 만들려고합니다 ... 피겨와 div를 모두 사용해 보았지만 그 중 하나도 없었습니다. 일. 내가 지금까지 가지고있는 코드 여기

됩니다 :

이

이 사이트 모형의 이미지입니다

HTML :

<div id="wrapper"> 
<header> 

    <div class="header"> 

    .logo 
    .searchbar 
    .phone numbers insert 

    </div> <!--closes header div--> 

</header> 
<div class="navband"> 
<nav> 
    <ul class="nav"> 
     <li><a href="#">Engineered Integrated Solutions</a></li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Clients</a></li> 
     <li><a href="#">Contact</a></li> 
     <li><a href="#">Employment</a></li> 
    </ul> 
</nav> 

</div> <!--closes navband div--> 
<div class="content"> 

    <h2>Header</h2> 
    <p>Content Here</p> 

</div> <!--closes content div--> 

CSS :

#wrapper { 
    width: 950px; 
    margin: 0 auto; 
} 

header { 
    width: 100%; 
    height: 175px; 
    background-color: #ff8400; 
} 

#nav { 
margin-top: 280px; 
width: 100%; 
} 

.nav { 
    list-style: none; 
    margin: 0; 
    text-align: left; 
    background-color: #08172d; 
    padding: 5px 0; 
} 
.nav li{ 
    display:inline; 
} 
.nav a{ 
    display:inline-block; 
    padding:10px; 
    color: #fff; 
    font-family: arial; 
    font-weight: bold; 
    text-decoration: none; 
} 
.nav a:hover{ 
    display:inline-block; 
    padding:10px; 
    color: #ff8400; 
    font-family: arial; 
    font-weight: bold; 
} 

위의 코드는 고정 너비 레이아웃을 표시합니다 (그 뒤에있는 전체 본문은 흰색으로 유지됨). bu t 피겨 메소드를 사용했을 때 일어났던 wrapper (fix-width)를 완전히 무시하지 않고 헤더, 탐색 바 및 내용 영역에 개별 전각 부모 div를 포함시키는 방법을 모르겠습니다 ... 어떤 아이디어?

Answer 1

당신은 최대 폭 속성은 요소의 최대 너비를 설정하는 데 사용됩니다

max-width 속성을 사용해야합니다. 이렇게하면 width 속성의 값이 max-width보다 커지지 않도록 할 수 있습니다. 참고 : max-width 속성 값이 너비를 재정의합니다.

내가 '그림 클래스의 해트트릭을 사용하고 있었다

.parent{ 
    width: 100%; 
} 
.child{ 
    padding: 25px 0; 
    margin: 0 auto; 
    max-width: 540px; 
}