0

大量の CSS 列レイアウト情報がありますが、少なくとも一部の列が固定幅 (またはパーセンテージ) を持っていることに依存しているように見えます。

私が達成しようとしているのは 3 列のレイアウトで、左右の列の幅は可変ですが (何でも入れることができます)、それぞれ左右に固定されています。中央の列は、それらの間に残っているスペースを占めるように拡張する必要があります。つまり、右側の列に何もない場合、中央の列は画面の右側に拡張されます。

以下は、デモンストレーションを行う簡単なショップです。

3 列の例

4

2 に答える 2

5

中央の要素を左右の列の後に配置しても構わない場合は、次のようにすることができます。

<div class="left"></div>
<div class="right"></div>
<div class="center"></div>

側面の要素をフロートするだけで、中央の要素にはオーバーフローを追加するだけです (hiddenまたはの可能性がありますscroll)。

.left {
  float: left;
}

.right {
  float: right;
}

.center {
  overflow: hidden;
}

フィドルは次のとおりです。

jsフィドル

于 2013-10-30T15:35:17.507 に答える
1

この種のレイアウトを支援するためにテーブルを (ab) 使用することができます。基本的な考え方は、表の幅を 100% (または必要に応じて固定値) に設定し、1 つの列の幅を 100% に設定し、CSS に他のセルに必要なスペースを決定させることです。簡単な JSFiddle を次に示します。

jsフィドル

CSS は基本的に次のとおりです。

table {
    width: 100%;
}

td.b {
    /* Middle element that expands. */
    background-color: #efe8e1;
    width: 100%;
}

ノート：

  • ものすごく単純！
  • 中央のセルで水平方向のオーバーフローが発生すると、オーバーフローの設定に関係なく、テーブルの幅が広がるという奇妙な習慣があります。中央の列だけでオーバーフロー スクロールを適切に機能させることは、完全な苦痛と不可能の間のどこかです。td position: relative を作成して、内部に position: absolute div を含めることができますが、正しく思い出せば、これは標準モードの IE8 では機能しません。
  • デスクトップ上の Firefox/Safari/Chrome の最近のバージョンでテストされ、ファジー メモリは、このトリックの非スクロール バージョンが IE7+ で正常に動作することを示しています。現実は異なる場合があります。:)
  • 「テーブルが足りない」と考えている場合は、display: table、table-row、および table-cell を使用してこれを実現することもできます。
  • このトリックは、縦方向の拡張でもうまく機能します。
  • これはテーブルなので、列は同じ高さのままです。
于 2013-10-30T15:41:36.517 に答える