div要素をきれいに並べるのは難しい（displayを使って配置）

いろんな方法はあるっぽいけど、とりあえず調べて動かしてみたやつを残しておく。
ブラウザによっては動かないとかあるかも。

displayでなくfloatでやるときはこっち。

以下の3つのdivをいろんな並べ方してみます。
（3つと言いつつ、パターンによって親divが発生したりします）

<div class="div1">div要素1</div>
<div class="div2">div要素2</div>
<div class="div3">div要素3</div>

長くなるので、colorやらbackgroundやらその他諸々は省略しています。

縦一列に並べる（何もしない）

<style>
.div1{
    width: 5em;
}
.div2{
    width: 5em;
}
.div3{
    width: 5em;
}
</style>

とりあえずwidthが揃っていればきれいなんじゃないですかね（なげやり）

div要素1

div要素2

div要素3

横一列に並べる

まず親divを作ります。

<div class="div_parent">
  <div class="div1">div要素1</div>
  <div class="div2">div要素2</div>
  <div class="div3">div要素3</div>
</div>

そして親divに「display: table;」、
横一列したい子divに「display: table-cell;」を追加。
heightは長い要素に合わせて勝手に調節してくれてるっぽい。

<style>
.div_parent{
    display: table;
}
.div1{
    display: table-cell;
}
.div2{
    display: table-cell;
}
.div3{
    display: table-cell;
}
</style>

div要素1

div要素2

div要素3

セル結合したテーブルっぽい感じのやつ（その１）

（語彙力がない）

さっきのを応用して…

<div class="div1">div要素1</div>
<div class="div_parent">
  <div class="div2">div要素2</div>
  <div class="div3">div要素3</div>
</div>

<style>
.div_parent{
    display: table;
}
.div1{
    width: 10em;
}
.div2{
    width: 5em;
    display: table-cell;
}
.div3{
    width: 5em;
    display: table-cell;
}
</style>

div要素1

div要素2

div要素3

セル結合したテーブルっぽい感じのやつ（その２）

さっきのを反時計回りに90度傾けた感じのやつ。

<div class="div_parent">
  <div class="div1">div要素1</div>
  <div class="div_child">
    <div class="div2">div要素2</div>
    <div class="div3">div要素3</div>
  </div>
</div>

<style>
.div_parent{
    display: table;
}
.div_div_child{
    display: table-cell;
}
.div1{
    display: table-cell;
}
.div2{
}
.div3{
}
</style>

↓なんかめっちゃズレてるな…ローカルだときれいに並んでるんだけども…。（このブログ自体のCSSが影響してるっぽい）

div要素1

div要素2

div要素3