cssを使って横並びにする場合、結局どれがいいのかなぁ・・・

プラグイン1をメインコンテンツの下側に移動して2カラムにしました・・・というか、前の配置に戻りました。
移動したプラグインはinline-blockで横並びにしました。
floatにしようか、display:table;にしようかと、いろいろ考えたのですが、結局使いやすいinline-blockに落ち着きました。
理由は・・・
理由は、これまた消去法で決まったのです(もっとポジティブな理由で使いたかったな -。-

まずは、display:table;を使った場合。
これは設定された個々のプラグインの数が多い場合に問題になります。
最低幅を設定した場合にも文字のように回りこんでくれないので幾つ並べるのか不確定なものに使うのは少々難しそう。

floatを使った場合。
これはtableと違ってプラグインの幅が全体の幅を超えると回りこんでくれるのですが、記事の量によってどこに回りこんでくるのかわからない事と、高さを揃えておかないと回り込んだ2列目以降の高さが揃わないことが問題。

inline-blockを使った場合。
これに関しては問題点が2つ。
1つ目は要素ごとにできる隙間。
これはletter-spacingにマイナス値を設定するか、一度font-sizeを0にすると解決するのですが、わざわざデザインのために値を設定してまたもとに戻すとなるとなんだか面倒臭いですよね。
また前者の場合はブラウザによっては隙間ができない場合もあるので要素が重なってしまうこともありますし、後者の場合はfont-sizeをデフォルト値で使いたい場合難しいです。
2つ目は、1つ目の理由とあまり変わらないのですが、要素ごとに隙間ができるせいでtableのように可変幅でピッチリ並べるのが難しいこと。

なので隙間に目を瞑ってinline-blockにしたのでした。
Category: 日記 Tag: 日記

コメント

コメントの投稿

トラックバック