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
セル結合したテーブルっぽい感じのやつ(その1)
(語彙力がない)
さっきのを応用して…
<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
セル結合したテーブルっぽい感じのやつ(その2)
さっきのを反時計回りに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