1

私は3列のウェブサイトを持っています。外側の列は固定され、中央の列は流動的です。私はこれを実装しました

<div style="display:table">
    <div style="display:table-row">
        <div style="display:table-cell">
        </div>
        <div style="display:table-cell">
        </div>
        <div style="display:table-cell">
        </div>
    </div>
</div>

(完全なコードについては jsfiddle を参照してください)

これで、中央の列に、幅が広すぎる可能性のある要素があります。私はこれを

overflow:auto

そのため、スクロールバーが表示されます。

編集:
申し訳ありませんが動作しません: http://jsfiddle.net/WtWCC/
動作します: http://jsfiddle.net/WtWCC/2/

Chrome の説明:
提供されている例では、スクロールバーが表示されるまで「+」をクリックします (クリックするほど、問題が明確になります)。スクロールバーのあるビューは私が気に入っているものです。2 つの固定列が表示され、中央の列が最大化されています。

ブラウザのサイズを変更します。(または jsfiddle ペイン)

ここでの問題は、中央の列がはるかに大きくなることです。右の列が非表示になります。

誰でもこの問題の解決策を知っていますか?

前もって感謝します。

編集: 説明されている動作は Chrome にあります。IE と Firefox では、Overflow:auto はまったく機能しません。

4

1 に答える 1

0

JSFiddle に問題がありました。役に立たない場合は申し訳ありません。

HTML:

<div class="wrap">
  <div class="left">
    Leftees
  </div>
  <div class="right">
    Righties
  </div>
  <div class="middle">
    Middies
  </div>
</div>

CSS:

.wrap{
    width:100%;
    overflow:hidden;
}
.left{
    float:left;
    background:red;
}
.middle{
    overflow:hidden;
    background:green;
}
.right{
    float:right;
    background:yellow;
}

jsfiddle

于 2013-02-20T18:06:42.793 に答える