разделите экран на равные части с переполнением

Question

Недавно я сделал сайт, на котором мне понадобилось 6 столбцов с видимым переполнением y. Я не мог сделать чистые 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

Я бы сказал, что лучше установить прокладку для внутреннего div .section, поэтому не нужно будет регулировать ширину .col.

Попробуйте этот HTML код:

<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> 

С помощью этого CSS:

#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; } поможет вам избавиться от лишних пробелов перед первым колонке

посмотрите at Live demo