0

を使用して、単純な 2 列の流体レイアウトを作成しBootstrap 2ました。1 つの列には 2 つが含まれdiv、もう 1 つの列には 3 つが含まれますdiv。両方の列は ですspan6。フィドルはこちらです。

CSS を使用して左の列の 2 つの の高さを調整しようとしましdivた。これにより、ブラウザー ウィンドウの高さの 62.5% を上が占め、残りが 37.5% を占めます。div右側の列の3 つの s についても同様です。しかし、いくつかの質問/問題があります:

  1. ブロックの高さdivはウィンドウを垂直方向に埋めず、各ブロックの高さはdiv変更されません。
  2. 各列内の相対的な高さの比率を考慮しながら、左側の 2 つの の合計の高さと右側の 3 つの の合計の高さをdiv等しくする方法 ( )divleft: 62.5%, 37.5%; right: 35%, 30%, 35%
  3. ブロック間のパディングを調整するにはどうすればよいdivですか?

これらすべてが Javascript なしで実現できることを願っています。

4

1 に答える 1

0

私は何かを試しました。それがあなたの助けになることを願っています。したがって、答えは次のとおりです。

  1. の高さを設定しなかったため、各 BlocX div の高さは変更されませんbody。ツアーの場合、 body は 内の要素によって指定される自動高さを持ちbodyます。

  2. 下を見てください。

  3. これらの「パディング」は、実際には class のマージン.wellです。したがって、そのクラスを避けるか、設定をオーバーライドしてください。

最後に、次のようなコードがあります。

HTML:

class.wellを削除しました。他はすべて同じです。

CSS:

html{height:100%;}

.body-background {
    padding-top: 10px;
    background-color: #D1D1D1;
    height:100%;
}
.container-fluid, .row-fluid, .span6
{
    height:100%;
}

#A-b {
    min-height: 62.5%;
    height: 62.5%;
    background-color: #FFE0C2;
}

#B-b {
    min-height: 37.5%;
    height: 37.5%;
    background-color: #4D4D4D;
}

#C-b {
    min-height: 35%;
    height: 35%;
    background-color: #969696;
}

#D-b {
    min-height: 30%;
    height: 30%;
    background-color: #57BCFF;
}

#E-b {
    min-height: 35%;
    height: 35%;
    background-color: #183547;
}

htmlとbody要素に与えheight:100%;、その後 、 と に同じこと.container-fluidを.row-fluid行い.span6ます。これで、 DEMOにこのような結果が得られました。

注: 768 ピクセル未満の解像度では、メディア クエリを使用して、BlockX およびその他すべての要素の高さを設定します。span6また、などに高さを直接設定しないでくださいrow-fluid。これは単なる例です。ライブ サイトでは、いくつかのクラスを使用して、ブートストラップでクラスをオーバーライドします。

于 2012-08-15T01:19:36.680 に答える