將屏幕分成與溢出相等的部分

我最近做了一個網站，我需要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足以嘗試，但會喜歡採取任何建議。

** * *** 我的工作了，太傻了。您需要使用％填充所有內容。杜爾 ** * ****對不起，浪費任何人的時間！

來源

2012-05-01 uriah

嘗試使用CSS網格框架如ht tp：//960.gs/它會花費所有的努力創建佈局。 – luke2012

該鏈接將爲您提供基於固定寬度佈局（主要爲960像素）的網格設計。我認爲它不會像op所設計的那樣在寬度可變的設計上非常有用。使用'％'一定會解決問題，但有時根據瀏覽器的不同，'％'計算的值可能會略微偏離。 – sarcastyx

我會說，最好是爲內部分區設置填充.section，因此不需要調整寬度。

試試這個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; }將幫助你第一列前去掉不必要的空白

看看在Live demo

來源

2012-05-01 09:21:34 aliona

這是一個更好的方式來實現我想要的。非常感謝你。 – uriah

我一直在尋找這個片段的高和低..非常感謝！ –

@SPATEN歡迎:) – aliona

將屏幕分成與溢出相等的部分

回答

相關問題