floatが嫌いな人のためのinline-blockによる横並び

ただのメモ。
うろ覚えの記憶を思い出しながら書いてるのでもしかしたら追記で増えるかも

display: inline-block;

直訳で"ブロックとして扱い横並びさせて見せる"ですね。
divを作ってその中に横並びさせたいdivを入れてやると、親divのwidthの限界で勝手に下に回りこんで並んでくれます。

html

<div id="inline">
  <div class="col">test1</div>
  <div class="col">test2</div>
  <div class="col">test3</div>
  <div class="col">test4</div>
  <div class="col">test5</div>
  <div class="col">test6</div>
  <div class="col">test7</div>
  <div class="col">test8</div>
  <div class="col">test9</div>
</div>

css

*{margin:0;padding:0}

#inline {
  width: 500px;
  border: 1px solid black;
}

#inline div.col {
  width: 100px;
  height: 100px;
  margin: 5px;
  display: inline-block;
  border: 1px solid black;
  background-color: blue;
  color: white;
}

表示結果

vertical-align

左に画像を置いて右にテキストを置いたりするのを交互にするっていうアレ
vertical-alignにより画像の横の文字列は画像の上下中央に来るようになります。

html

<div id="inline">
  <div class="row">
    <div class="left col">左に画像をおいてみたり</div>
    <div class="right col">右にテキストを書いてみたり右にテキストを書いてみたり右にテキストを書いてみたり</div>
  </div>
  <div class="row">
    <div class="right col">right</div>
    <div class="left col">left</div>
  </div>
  <div class="row">
    <div class="left col">left</div>
    <div class="right col">right</div>
  </div>
</div>

css

* {margin:0;padding:0}

#inline {
  width: 400px;
  padding-top: 8px;
  border: 1px solid black;
}

#inline div.row {
  margin-bottom: 10px;
}

#inline div.col {
  width: 185px;
  margin: 5px;
  display: inline-block;
  vertical-align: middle;
}

#inline div.left.col {
  height: 150px;
  background-color: silver;
}

#inline div.right.col {
  height: 50px;
}