1

最近、yオーバーフローが表示された6列が必要なWebサイトを作成しました。きれいな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を試すのに十分な知識はありませんが、アドバイスをお願いします。

** * ***私はそれを解決したので、ばかげています。パディングを含むすべてに％を使用する必要があります。ええと** * ****誰かの時間を無駄にしてすみません！

4

1 に答える 1

3

内側の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; }最初の列の前に不要な空白を取り除くのに役立つことに注意してください

ライブデモをご覧ください

于 2012-05-01T09:21:34.543 に答える