css - 用溢出将屏幕分成相等的部分

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，无法尝试，但愿意接受任何建议。

** * ***我解决了，太傻了。您需要对包括填充在内的所有内容使用 % 。呵呵** * ****抱歉浪费了大家的时间！

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; }将帮助您在第一列之前消除不必要的空白

看看现场演示