FC2ブログ
超ド素人nagomiがWEBデザイナー目指して学校通ってみました。 半年勉強して気づけば私もWEBデザイナー♪人生なんとかなるものですね★ 新米デザイナーになったnagomiのお仕事や勉強したことなどのメモブログです。これからどういう風になっていくのか楽しみです★
スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
floatの設定
すっごい単純なことでミスってばっかり。
画像とテキストを左右に並べたくて、
現状だと画像がない部分はテキストが回りこむようになってるんだけど、
それを回り込ませたくないという要望。

090119-01.jpg

こんなだったのを

090119-02.jpg

こんな風にして欲しいってこと。


今は単純にテーブルの中に
<img>があって、<p>があって、
なので、画像をよけてテキストが回りこんでるので、
両方にfloatかけて段落2つ並べりゃいいんじゃん!?

って、htmlかるーく修正したら
IEだと綺麗になるけどfirefoxがダメ。
上下にズレちゃう。

090119-03.jpg

こんな感じでズレる↑。

よくやる手法なんだけど、
多分ここで<p>の方に横幅widthを設定してあげれば解決すると思われる。

でも、指定したくない。
画像がないときは自由にのび縮みして欲しかったのですよ。

なので色々調べてみたけど
結局これといった回避策は見つからず。

とらいえず、cssで制御して
<img>と<p>両方にfloat:left を設定して
さらにwidthも設定。
そしたらfirefoxでも綺麗に並んだ。OK。

あとは、システムの人にお願いしちゃいました^^;;
画像がないときは、cssを外してもらう条件設定で・・・。

実は解決策・・・あるのかな?

今回は思いつかなかったので、
とりあえずfloatをかけるときはwidthも設定。。。と。今更メモ。



スポンサーサイト

コメント

管理人にのみ表示


トラックバック
TB*URL

© 初心者WEBデザイナーのメモ帳. all rights reserved.
Page top
FC2 BLOG
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。