須賀徹の日記

あれこれとその他です。

”inline-block”使用

2014年8月28日(木)

天気 雨、小雨、雨、時々止む。

家で事務作業。

 

HP内の大工仕事施工例のページを変更しました。

大工仕事の施工例 改築 改修 改装 増築 リフォーム 交換

大きな変更点は今までは文字での表記でしたが写真入りになりました。

また内部では”table”で組んでいたレイアウトを”div id=”タイプにしました。

 

「写真があってその下に説明文のあるブロックを高さを揃えて並べる」

”table”使うと簡単ですが、調べてJavaScript使ってみたりしたんですが上手くレイアウトできるものがなかなか無く、む~~~どうしようかとさらに調べると”inline-block”を使用してできるらしいのがわかり試しにやってみるとOK!

高さの違うブロックを横並びで折り返した時の崩れを無くす - CSSテクニック - acky info

上記のサイトを参考にしました。

CSSとhtmlだけでできるのもわかりやすくてよかったです。

(”inline-block”はIE6やIE7だとうまく動かないと書かれておりますが・・・

 

須賀建築 http://www.suga-kenntiku.com/index.html

沢山のアクセスありがとうございます。