0

最上位に 4 つの中央列があり、960 グリッド ピクセル ステージ全体ですべて同じ幅のサイトがあります。特定のクエリ文字列が URL に追加された場合、列の数 (コース内のコンテンツを含む) を 1 に減らすことができます (1 未満になることはなく、4 を超えることはありません)。

例えば：

www.site.com

4 つの列すべてが表示されます。行き先:

www.site.com?col=3

サイトになりますが、4 番目の列はまったくありません。アイデアは続きます。私が苦労しているのは、(PHP によって管理される) クエリ文字列が存在する場合、他の列の幅を「自動」修正してページの幅全体を維持できるようにすることです。

それで：

  • IF 4 列の場合、すべての列は 220 ピクセルで、両側に 10 ピクセルの余白があります。
  • IF 3 列、すべての列が 300 ピクセルで、各辺に 10 ピクセルの余白があります
  • 2 列の場合、すべての列が 460 ピクセルで、各辺に 10 ピクセルの余白があります
  • IF 1 列の場合、各辺に 10 ピクセルの余白がある 940 ピクセルです。

私はこれを達成したいのですが、可能であれば動的に、できれば1つの一般的なCSSクラス内で実現したいと考えています。

アップデート

コンセンサスの答えは、液体ベースのフォーマットを使用することです（私はこれを想定していましたが、現在のプロジェクトが構築されているため、私が気付いていなかった可能性のあるハックを望んでいました）.

4

1 に答える 1

1

フレキシブルボックスモデルは、ここに行く方法です。実際の動作を確認するには、このcodepenを参照してください。IE <10をサポートしたくない場合は、それを使用できます（プレフィックス付き）。

CSS：

.wrapper {
  display: box; //this property needs prefixes
  width: 960px;
  height: 100px;
  margin: 10px;
  background: red;
}

.box {
  box-flex: 1; //this property needs prefixes
  height: 100px;
  background: green;
  margin: 0 10px;
}

HTML：

<div class="wrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>  
  <div class="box"></div>  
</div>

<div class="wrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>  
</div>

<div class="wrapper">
  <div class="box"></div>
  <div class="box"></div>
</div>

<div class="wrapper">
  <div class="box"></div>
</div>
于 2012-12-04T21:16:22.567 に答える