div를 CSS로 페이지 너비로 확장하려면 어떻게해야합니까?

Question

나는 종류의 다음과 같이 된 div의 부부와 함께 페이지가 있습니다

<div id="div_one">blah blah blah</div> 
<div id="div_two">blah blah blah</div> 

내가 그들을 수평으로 하나씩을 중심으로하는 두 번째의 페이지의 폭을 확장합니다.

Answer 1

.first_one 
{ 
    margin-left: auto; 
    margin-right: auto; 
    text-align: center; 
} 

.second_one 
{ 
    width: 100%; 
} 

, 첫 번째에 대한 두 번째의 경우

<div class = "first_one"> 
... 
</div> 

할 것입니다, 당신은

<div class = "first_one second_one"> 
... 
</div> 

Answer 2

Div는 기본적으로 컨테이너의 전체 너비입니다.

콘텐츠를 가로로 가운데에 맞추려면 "text-align: center;"을 설정하십시오. 그들이 컨테이너에 있다면 컨테이너에 "margin: auto"을 사용하십시오. 그러면 왼쪽과 오른쪽 여백이 자동으로 div의 가운데에 오도록 설정됩니다.

보기에 그런

Answer 3

요소에 기본 마진가 명심 할 것입니다 그래서 비록 그것이 100 % 일지라도 여전히 측면에 약간의 간격이있을 수 있습니다. 필요한 경우 CSS를 사용하여 여백을 0으로 재설정 할 수 있습니다.

Answer 4

body{ text-align: center; } 

.first_one 
{ 
    width: 600px; /* Can be any width */ 
    margin:0 auto; 
} 

/* Reset text-align for child content */ 
.first_one, .second_one{text-align: left} 

IE6에서 "first_one"을 중심으로 배치하려면 부모 요소에 'text-align : center'를 설정해야합니다. 이 경우,이 노드가 본문 노드라고 가정합니다. 또한 너비를 지정하지 않으면 margin : 0 auto가 작동하지 않습니다.

그러면 자식 div에 텍스트 정렬을 설정하여 그 안에있는 내용이 가운데에 오지 않도록 할 수 있습니다.

블록 요소가 부모 컨테이너를 채우기 위해 자연스럽게 확장되므로 "second_one"에 너비를 지정할 필요가 없습니다. 또한 너비를 설정하지 않으면 브라우저가 레이아웃을 손상시키지 않고 "second_one"에 적용 할 수있는 여백, 여백 및 테두리를 고려합니다.