1

こんにちは、これは私を怒らせています。誰か助けてください。大きな画面の中央に2x2のdivのグリッドが必要ですが、小さな画面で表示すると1x4に移動しますが、中央に配置されます。これまでのところ、これは機能しますが、小さな 1x4 ビューで左に配置されます。float:left の代わりに inline-block を使用しようとしましたが、#frame-block を使用してコンテンツをさらに追加することはできません。幅は 500px の固定幅でなければなりません

#frame-block {
width: 500px;
border: 2px #0066FF solid;
margin:5px;
height:400px;
float:left;
}


#frame-container {
  text-align: center;
}

#frame-main {
  display: inline-block;
  vertical-align: middle;
}​

<div id="frame-container">

  <div id="frame-main">

     <div id="frame-block"></div>
      <div id="frame-block"></div>

    </div>

</div>
4

2 に答える 2

1

どうぞ: http://dabblet.com/gist/3734237 .

問題の1 つは、ID の再利用でした。ID は一意であり、ページごとに 1 回だけ使用する必要があります。これについては、さらに詳しい情報があります: http://csswizardry.com/2011/09/writing-effective-css-selectors/。

あなたのコードの修正で、ID をクラスに変更し、.frame-block を「float: left」ではなく「display: inline-block」にしました。

ピクセル単位ではなく相対単位を使用することをお勧めします。これにより、「本文」の基本フォントサイズを変更するだけで、500px 未満の小さな画面に適応できます。ここで詳細を読むことができます: http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/

于 2012-09-16T20:37:54.893 に答える
1

メディア クエリを使用#frame-blockして、特定の解像度で 2 倍の幅にするのはどうですか?

于 2012-09-16T19:55:26.847 に答える