日々夢想

つれづれなるままに ひぐらし すずりにむかいて 

floatで画像サイズが整数倍異なるグリッドデザインのサイトを作ろうと思ったら無理だったを話。

リスト要素にfloat:leftを設定して、画像サイズが整数倍異なりブラウザの横幅によって画像を拡大縮小するグリッドデザインのサイトをつくってみたらブラウザの横幅によってはレイアウトが崩れた。

http://www.kirin.co.jp/
↑こんなやつ。

画像の縮小で小数点以下の倍率がかけられ1px誤差が発声するからfloatできれいに横並びしない・・・


無理だと思ったのでfloatでの実装はあきらめてpostion,top,leftで対応した!

.class-name {
  position:absolute;
  top:XX%;
  left:XX%;
}

それにしてもやはり既存サイトのトレースは勉強になる。