float以外で横並び(2カラム)レイアウトを組む

2015/08/12
divなどのブロック要素を使って表示をタイル形式にする際には、floatを使うのが私は使いやすいです。むしろそれしか知らない。tableはよくわかんない。
floatでブロック要素を並べるには、親要素の画面幅(width)を指定して、その中の子要素として適当に並べてやった方が楽ちんではありますが。
まあ、floatの語源通り、あくまでブロック要素を浮かせるのが、この指定の肝なので、横並びにした際に縦の高さが均一にならないとはよくある事…。
heightとか使って高さ指定するのもアリっちゃアリです。その時に、オーバーフローとか指定してあげてもいいかも。でもそうすると、スクロールバーの設定とか文字数の限界があって、また考えるのメンドクサイ…。

でもどうやら、こんなレイアウトに面倒な事をしなくても解決出来る方法があるそうで。

【CSS】3カラムレイアウトでボックスの高さを揃えて横並びにする。

高さが決まっていないボックスの高さを均一にして横並びにしていく場合は「inline-block」を使おう


div{
  width:200px;
  display:inline-block;
  vertical-align:top;
}

まんま引用ですが、inline-blockとはインライン要素と同じようなもので、ううん、inline要素とは、書式とか強調文字とか、文脈の途中にも使えるタグの事です。(多分) 対してブロックレベル要素は、囲みの中全てを設定する要素です。大雑把ですが、私の認識はこんなもんです。
…何が言いたいのかといいますか、つまりはfloatで浮かせていたブロックレベル要素を、インライン要素に変えて並べちゃえ。って寸法ですね。これはよい発見をしました。便利。
comment (0) @ Tips
FC2ブログテンプレートのサイドメニューの追加 | CSSで背景画像などを変更する

comment

コメントを送る。

URL:
Comment:
Pass:
Secret: 管理者にだけ表示を許可する
 

Girafe

日常。たまにテンプレート配布していたりします。