Web標準の日々「J3 jsライブラリで実装する効率的なWeb制作」のグループディスカッションで、私が所属していたグループで発表させていただいた「横に並んだDIVの下がそろわないので、きちんとそろうライブラリ」について、な、なんと西畑さんがさっそく作成してくださいました！
ブロックレベル要素の高さを揃えるheightLine.js / [to-R]とあるWEBクリエイターのblog
使い方はカンタン。heightLine.jsへのパスをhead要素内に記述し、高さをそろえたいブロックレベル要素に『heightLine』というclass名つけるだけです。
さらに『heightLine-○○』と、ハイフンをつけて任意のグループ名をつけると、そのグループの中で高さがそろえられたり、高さをそろえたいブロックレベル要素の親要素に『heightLineParent』と記述するだけで高さが揃ってしまう・・・など、かゆいところに手が届く仕様になっています。
詳しい設置方法やサンプルHTMLは西畑さんのブログのheightLine.jsに関するエントリーに記載されています。またheightLine.jsはMIT Licenseにて配布されています。
セッション内で紹介されたjsライブラリーもさっそく仕事で使ってみたり、セッション内ではピンとこなかった「onLoadがバッティングした際の対処法」もjsライブラリー使っていない案件で早速大活躍の場面が登場したりと、ホントjsライブラリーのセッション受けてよかったと思っております。
そして何より自分たちのグループで提案した案を、heightLine.jsというjsライブラリーとしてカタチにしてくださったことに大変感謝しています。西畑さん、ありがとうございました！
はじめまして。
heightLine.jsを使っています。IEではきちんと揃っていますが、Firefoxでは揃いません。どうしたものかと、
悩んでいます。何か変更する必要があるとこがあるのでしょうか。ご教授していただければうれしいです。
Firefoxでも問題ありませんよ。サンプルサイトでも正しく挙動していると思いますので。
http://blog.webcreativepark.net/sample/js/18/