div가 연속으로 머물러 있지 않은 이유는 무엇입니까?

Question

나는 똑같은 크기의 div에 대해 내 자신의 그리드 시스템을 만들려고했다. 목표는 1024px 화면/장치 너비와 같은 행에, 어쩌면 더 낮은 너비에 유지하는 것이었다. 나도 내 코드 (아래 코드) 부트 스트랩 사용하고 어떤 이유로 그러나 1024 픽셀에서 div의가 동기화 이동하지만 총 자체가 1024px 년대를 차지하지에도 불구하고 높은 폭으로 괜찮 -

HTML을

<div clss="row-fluid"> 
<div id="box" class="span12"> 

    <div class="grid"> 

    <div class="b b1"> 

     <div class="module"> 
     <h2> 
     IMPORTANT TITLE GOES HERE 
     </h2> 
     </div> 

    </div> 

    <div class="b b2"> 

     <div class="module"> 
     <h2> 
     IMPORTANT TITLE GOES HERE 
     </h2> 
     </div> 

    </div> 

    <div class="b b3"> 

     <div class="module"> 
     <h2> 
     IMPORTANT TITLE GOES HERE 
     </h2> 
     </div> 

    </div> 

    </div>  

</div> 
</div> 

CSS -

*, { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 



#box{ 
    max-width: 1024px; 
    min-width: 250px; 
    margin: 30px auto; 
    background: #111; 
} 

.grid { 
    overflow: hidden; 
} 
.grid .b{ 
    float: left; 
} 

.grid .b1 { 
    max-width: 341px; 
    min-width: 250px; 
    height: 200px; 
    background: blue; 
} 
.grid .b2 { 
    max-width: 341px; 
    min-width: 250px; 
    height: 200px; 
    background: red; 
} 
.grid .b3 { 
    max-width: 341px; 
    min-width: 250px; 
    height: 200px; 
    background: green; 
} 

.module { 
    padding-top: 20%; 
} 

그래서 어디에 내가 잘못 갈거야 내가 어떻게 고칠 수 있나요?

Answer 1

기본적으로해야 할 일은 CSS 속성 'float'과 'clear'를 사용하는 것입니다.

여기에서 확인해보십시오. JSFiddle.

이 예제의 경우 아래에 표시된 것처럼 모든 div를 대상으로 설정했으나 페이지의 모든 div가 필요하지 않은 개별 div를 대상으로 지정하는 것이 분명합니다.

div { 
    float:left; 
    clear:left; 
} 

희망이 있습니다.