1

HTML

<div id="box-1">
  <div class="sub-box"></div>
  <div class="sub-box"></div>
  <div class="sub-box"></div>
  <div class="sub-box"></div>
  <div class="sub-box"></div>
</div>
<div id="box-2">
  <div class="sub-box"></div>
</div>

CSS

#box-1 {
  width: 500px;
  height: 100px;
  overflow: auto;
  background: black;
}
#box-2 {
  width: 500px;
  height: 100px;
  background: red;
}
.sub-box {
  width: 20%;
  height: 30px;
  border-right: 5px solid #FFF;
}

http://codepen.io/Calum/pen/IEbKj

2 つのサブボックスの境界が一致しません。両方のサブボックスにスクロールバーを付けたくありません。20% をピクセル値に変更したくありません。

境界線を揃えるにはどうすればよいですか? なぜこれが起こるのですか？

4

3 に答える 3

1

スクロールバーが の幅から差し引いているため、境界線が整列しません#box-1。 20%of 500px-<scrollbar>ボックス 1 の幅を少し狭め、境界線を数ピクセル上に配置します。

%スクロールが必要な場合は、幅に使用できません。

于 2013-11-06T21:14:10.313 に答える