オーバーフローで画面を均等に分割する

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

.sectionの内部にパディングを設定する方が良いので、.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