0

中央の列#palette (エラスティック列) に次の innerHTML マークアップ スニペットがある 3 列のマークアップがあります。

<div id="palette">
<div id="wrapper" style="left: -354px; top: 0px;">
  <div id="colours">
    <ul>
      <li class="swatch"><a tite="Beige" style="background-color:beige;"  class="label" href="javascript:void(0);"><span>&nbsp;</span></a></li>
      <li class="swatch"><a tite="Bisque" ... class="label" href="javascript:void(0);"><span>&nbsp;</span></a></li>
      <li class="swatch"><a tite="Brown" style="background-color:brown;" class="label" href="javascript:void(0);"><span>&nbsp;</span></a></li>
      <li class="swatch"><a tite="Coral" style="background-color:coral;" onclick="setColouringColour(this);" class="label" href="javascript:void(0);"><span>&nbsp;</span></a></li>
      ....
    </ul>
  </div>
  <div id="brush-sizes"> <span style="width:16px; height:16px;" ><span>16</span></a></span> <span class="brush badge" style="width:32px; height:32px;"><a...><span>32</span></a></span> <span class="brush badge" style="width:64px; height:64px;"><a...><span>64</span></a></span> </div>
  <div id="brushes"> <a class="selected btn btn-mini"...>&nbsp;</a> <a class="btn btn-mini">&nbsp;</a> </div>
</div>

次の CSS ルールが適用される場所

#palette {
float: left;
height: 100%;
position: relative;
width: 100%; overflow:hidden;
}
#wrapper {
 display: inline-block;
position: absolute;
top: 0 !important;
white-space: nowrap;
width: auto;
}

注: #paletteoverflow:hiddenであるため、left:*n*px;を使用して#wrapperをスクロールできます。. 子どもたち#wrapper内 はすべてdisplay:inline-block; です。クリア:なし;

私が抱えている問題は、#wrapperがその子の「全幅」にないことです...したがって、最後までスクロールできないようです。

ここでの問題の原因は何ですか? CSS のみを使用して修正するにはどうすればよいですか ( CSS のみで解決できますか?)

4

1 に答える 1

0

どうやら残りの 2 つの< div >の 1 つを固定幅に設定する必要があり、最大幅と最小幅を適切に設定しようとしました。なぜそれが機能したのかわからない

于 2013-04-22T14:45:40.333 に答える