TryIT! - とりあえず、おもいついたらやってみる!

レスポンシブルデザインに対応→見事失敗

OneThird CMSをレスポンシブルデザインに対応中

既に10以上のCSSフレームワークに対応したんですが、どうしても上手くいかないパターンがあったのでメモ

うまくいかなかったのはこちら

http://csshor.us/


結論から先に言うと

このCSSフレームワークは、レスポンシブルにするため、float:leftを使っている

Gridエレメントは上から順番に積層されていくわけだけど

こんな感じ

[elem1:top]

[elem2:header]

[elem3:contents]

これらは、見た目縦に積み重なっている

でも、実はレスポンシブルにするために、[elem1:top]と[elem2:header]は float:leftで積み重なっている

ややこしくてうまく説明できないけど、CSSを見たらわかる

で、[elem3:contents]は、見た目は[elem2:header]の下に配置されているけど、[elem1:top]と[elem2:header]がfloat:leftなので、[elem1:top]と[elem2:header]を覆っているように配置されてしまっているのですよ

だから、OneThirdが持っている編集ハンドルが正常位置に表示されずうまく動作しない

うーーむ。どうかしたしたいけどうまい方法を思いつかない

チェレンジ失敗(T^T)




« 腕立て伏せ2万回... 9種類のレスポン... »
2013-04-17 21:46:41