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


}

它很邋and，柱子没有到达最右边缘。

我不太了解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; }将帮助您在第一列

之前消除不必要的空白区域

看看Live demo

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

1 个答案: