2012-01-03 12 views
0

これは説明が難しいでしょうが、うまくいけばCSS忍者が2人いるか、私を助けることができるでしょう。液体レイアウトの水平マージンに比例した垂直マージン

基本的には、正方形のDIV(Windows 7の電話メトロインターフェイスを想像してください)のグリッドを作成したいと思います。これは、割合を使って画面に合わせて広がり、四角形の間に水平方向と垂直方向に等しいギャップがあります。

かなり簡単ですが、実際にはうまくいきません。

例を挙げておきます。画面の幅が1000pxで水平方向が5個の場合、幅は約18%(それぞれ180px、合計90%)となりますが、それらの間のギャップは10%ですが、...

1)スクリーンの左右に隙間がないように各DIVをフロートしますが、各スクエアの間に水平方向に2.5%のギャップがありますか?

2)画面のサイズが変更されると、正方形間の水平間隔に合わせて比例縦型ギャップを作成するにはどうすればよいですか?

3)各DIVが正方形のままであるように、高さは容器の幅のパーセンテージに正確に比例します。

私はこれについてすべて間違っていると思いますか?非常に混乱。

本当にありがとうございます。

答えて

0

私が最後に見つけた答えは、透明な正方形の画像を使用することでした。幅をxピクセルにすると、ブラウザによって自動的にサイズが変更され、ピクセルがxピクセル大きくなります。 divを含むことは明らかです。

0

私はSUSYのような何かのグリッドシステムをメディアクエリで使用します。

基本的にあなたが応答グリッドをしたい、ここでいくつかの例は次のとおりです。

  • ゴールデングリッドシステム
  • 1140px
  • LESS
  • Columnal
  • inuitCSS
  • スージー
  • セマンティック
関連する問題