4

基本的な3列のレイアウトを作成しようとしています。基本的に、中央の柱は、左右の柱で使用されていないスペースを消費するように拡張する必要があるという点で流動的である必要があります。min-widthただし、約378ピクセル の固定も必要です。

フロートを使用するかどうかに関係なく、完全に流動的な中央の柱を使用して3列のレイアウトを作成するためのオプションがいくつかあります。ただし、これまでに遭遇したすべてのパッケージ済みソリューション（および自分で試したソリューション）の問題は、ページ幅が狭くなると、ページが表示されると右側の列が中央の列の上に表示されることです。狭くなりすぎます。

できればこれを防ぎたいです。理想的には、min-widthがヒットすると、右側の列はその位置に留まり、ページは水平方向にスクロール可能になるはずです。したがって、目標は次のとおりです。

  1. 流動的な中央の列と固定幅の左右の列を持つ3列のレイアウト。
  2. 小さくなりすぎないように最小幅を固定した中央の支柱。
  3. 最小幅を尊重し、ウィンドウが小さくなりすぎたときに中央の柱を踏みつけたり、浮いたり、下に折り返したりしない右柱。

純粋なCSSソリューションが推奨されますが、巧妙なJavaScriptを使用してこれを行う簡単な方法があれば、そのアプローチにも異論はありません。

4

1 に答える 1

6

これには、display：tableプロパティを使用できます。このように書いてください：

#wrapper{
    display:table;
    width:100%;
    height:100%;
}
#wrapper > div{
    display:table-cell;
    height:100%;
}

#left {
    width:50px;
    min-width:50px;
    background-color:pink;
}

#center {
    background-color:green;
    min-width:200px;
}

#right {
    width:50px;
    min-width:50px;
    background-color:red;
}

body, html{
    width:100%;
    height:100%;

}

これをチェックしてくださいhttp://jsfiddle.net/ykAPM/137/

于 2012-11-27T07:06:56.510 に答える