html - Webページを固定レイアウトにするにはどうすればよいですか？

Question

サンプル/jsFiddleは次のとおりです：http：//jsfiddle.net/antonpug/ub7xW/

基本的にはjsFiddleでは見えないと思いますが、全画面表示では2列ですが、画面を小さくすると1列に折りたたまれてしまいます。私のCSSのどこでそれが行われているのかを理解してください！

score 1 · Accepted Answer

これはそれを引き起こします：

.column {
    display: inline-block;
    width:600px;
    margin:15px;
}

inline-blockあなたwrapperが1200px以上の場合、はそれらを隣り合わせに配置しますが、そうでない場合はそうではありません。折り返したくない場合は、最小幅を設定します。

#wrapper {
    min-width: 1200px; /*might need a bit more for margins*/
    margin:25px;
}

score 0 · Accepted Answer

それはかなり簡単です：

.column {
    display: inline-block;
    width:600px;
    margin:15px;
}

両方とも「.column」を持つ2つのDIVがあります。これらのDIVの静的幅は600pxです。それらのためのスペースがある限り、それらは互いに隣り合って浮きます（つまり1200pxコンテナ）

ページが小さすぎるため、折りたたまれます。

2列を維持する場合は、次のように幅を％に設定する必要があります。

.column{
    ...
    width: 40%;
}

探しているものに応じて、マージンも調整する必要があります。

特定のサイズまで2列を保持する場合は、ラッパー要素に最小幅を設定して、列が小さくなりすぎないようにすることができます。

.wrapper{
    min-width:600px;
}

次に、小さい画面サイズのメディアクエリを実行して、携帯電話などの列を1つにまとめることができます。

score 0 · Accepted Answer

列を並べて配置する場合は、セレクターの下に幅を指定する必要があります。body

何かのようなもの

body {width:1500px;}

これにより、ボディが画面からはみ出し、列が隣り合って配置されます。それ以外の場合、デフォルトはであるため、画面の幅（または「表示領域」）によってセレクターのが設定されwidthます。bodywidth:auto

score 0 · Accepted Answer

cssをに変更します

#wrapper {
  margin: 25px auto;
  width: 80%;
}

と

.column {
  display: inline-block;
  width: 46%;
  margin: 15px;
  float: left;
}

score 0 · Accepted Answer

列のcssをこれに変更すると、問題ないはずです。

.column {
    display: inline-block;
    margin:15px;
    width:40%;
}

5 に答える 5