오버플로로 화면을 똑같은 부분으로 나눕니다.

Question

최근에 나는 오버플로가 보이는 6 개의 열이 필요한 웹 사이트를 만들었습니다. 나는 깨끗한 6 사단을 만들 수 없었다. 폭은 6 스크롤바와 약간의 여백에 맞게 조정해야했습니다.

내 시도보다 좋은 방법이 있습니까?

<div class="col"> 

    <div class="section"> 
    Content that overflows this section. 

    </div> 

</div> 

    .col { 

    width: 15.2%; 
    padding-right: 15px; 
    float: left; 
} 

.section { 
    overflow-y: scroll; 
    width: 100%; 


} 

매우 우울하고 열이 맨 오른쪽 가장자리에 닿지 않습니다.

jquery는 시도 할만큼 잘 모르지만 조언을 듣고 싶습니다. ** * ***

는 내가 너무 바보, 그것을 밖으로했다. 패딩을 포함한 모든 것에 %를 사용해야합니다. Duh ** * **** 아무데도 시간을 낭비해서 죄송합니다.

Answer 1

.section 내부 div에 대해 채우기를 설정하는 것이 더 좋으므로 .col 너비를 조정할 필요가 없습니다. 이 CSS로

<div id="grid"> 
    <div class="col"> 
     <div class="section"> 
     Content that overflows this section. 
     </div> 
    </div> 
    <div class="col"> 
     <div class="section"> 
     Content that overflows this section. 
     </div> 
    </div> 
    <div class="col"> 
     <div class="section"> 
     Content that overflows this section. 
     </div> 
    </div> 
    <div class="col"> 
     <div class="section"> 
     Content that overflows this section. 
     </div> 
    </div> 
    <div class="col"> 
     <div class="section"> 
     Content that overflows this section. 
     </div> 
    </div> 
    <div class="col"> 
     <div class="section"> 
     Content that overflows this section. 
     </div> 
    </div> 
</div> 

:

이 HTML 코드를 시도

#grid { 
    margin-left: -15px; 
} 

.col { 
    width: 16.6%; 
    float: left; 
} 

.section { 
    overflow-y: scroll; 
    margin-left: 15px; 
    height: 100px; 
    background: green; 
}​ 

는 #grid { margin-left: -15px; }가

가 살펴 먼저 열 전에 불필요한 공백을 제거하는 데 도움이되므로주의하시기 바랍니다 Live demo