1

HTML：

<div id="mcolWrapper">
    <div id="mcol">
      <div class="wrapper">
      content
      </div>
    </div>
</div>

<div id="lcol">
    <div class="wrapper">
    content
    </div>
</div>

<div id="rcol">
    <div class="wrapper">
    content
    </div>
</div>

CSS：

#mcolWrapper {
    float: left;
    width: 100%; }

#mcol { margin: 0 295px 0 235px; min-width: 500px; }

#lcol {
    float: left;
    width: 235px;
    margin-left: -100%; }

#rcol {
    float: left;
    width: 290px;
    margin-left: -295px;

中央の列に最小幅を設定して、縮小しすぎないようにし、この最小幅のポイントを超えないようにします。ブラウザに、中央の列と重なる右側の列ではなく、水平スクロールバーを表示したいと思います。

4

2 に答える 2

1

jQueryスプリッタープラグインを試すことができます。これは、列レイアウトが必要なときに使用するものです。これは、CSSテンプレートよりもブラウザーの違いを抽象化するのに優れており、スクロールバーを完璧に処理するためです。

http://methvin.com/splitter/

于 2009-11-12T05:34:44.677 に答える
0

min-widthは、完全にサポートされているcssプロパティではありません。あなたの状況でこれを回避する簡単な方法は、最小幅の値に等しい幅を持つdivを列の下部に追加することです。

<div id="mcol">
  ...
  <div style="width:500px;"></div>
</div>

これにより、カラムをこれ以上縮小できなくなります。お役に立てば幸いです。

于 2009-11-12T05:12:01.323 に答える