가로 레이아웃 : div는 하위 div의 너비를 무시합니다.

Question

현재 열 기반의 스크롤 가능한 가로 레이아웃을 만들려고합니다. float: left과 position: absolute으로 놀고 난 후에도 내가 원하는 방식으로 행동하지 않는다는 것을 알게 된 지금 나는 매우 간단한 HTML로 돌아 왔지만, 불행히도 내 코드는 여전히 예상대로 동작하지 않습니다.

내가 현재 다음 HTML 사용

<div id="content"> 
<div style="height: 600px; width: 1320px;"> 
    <div class="newsify_column" style="display: inline-block; width: 200px; margin-right: 20px;">some text can be put here, but it is made sure that this column is never higher than 600px!</div> 
    <div class="newsify_column" style="display: inline-block; width: 200px; margin-right: 20px;">some text can be put here, but it is made sure that this column is never higher than 600px!</div> 
    <div class="newsify_column" style="display: inline-block; width: 200px; margin-right: 20px;">some text can be put here, but it is made sure that this column is never higher than 600px!</div> 
    <div class="newsify_column" style="display: inline-block; width: 200px; margin-right: 20px;">some text can be put here, but it is made sure that this column is never higher than 600px!</div> 
    <div class="newsify_column" style="display: inline-block; width: 200px; margin-right: 20px;">some text can be put here, but it is made sure that this column is never higher than 600px!</div> 
    <div class="newsify_column" style="display: inline-block; width: 200px; margin-right: 0px;">some text can be put here, but it is made sure that this column is never higher than 600px!</div> 
</div> 
</div> 

(JSFiddle of it here) 기본적으로

가 작동하는지, 나는 데 문제가 content -div이 자식 DIV의 크기를 무시하고 있다는 점이다 차례대로 body 태그의 크기가 올바르지 않습니다! content -div의 높이가 정확하게 표시되어 있지만 브라우저 창 너비는 1320 픽셀이 아닙니다. 페이지 너비가 100 %가되도록 다른 요소의 크기가 잘못 지정되어 있고 content -div에 여백이나 안쪽 여백을 사용할 수 없기 때문에 좋지 않습니다.

나는 여기에서 무슨 일이 일어나고 있는지 이해하지 못합니다 - 저는 플로트 나 절대적인 요소를 사용하지 않고 명시 적으로 크기가 정해져있는 요소를 가지고 있습니다. content -div가 이것을 무시하는 이유는 무엇입니까? 자녀를 수용하기 위해 필요한 크기를 가져야하지 않습니까? 감사!

Answer 1

은 콘텐츠 div에도 인라인 블록을 사용합니다.

디스플레이 : 블록 요소는 기본적으로 자동으로 100 % 너비를 갖습니다. body의 너비가 100 % (뷰포트의 크기, 즉 브라우저 창 크기) 이고 하위 콘텐츠의 너비도 100 %입니다.