MW211 EXIT

devlog
CSS/段組(横二列)
2013年06月29日
【可変】
  (1) テーブルタグを使うパターン(段組としては忌嫌われるが便利)
┌──────────────────────────────────────┐
│<table><tr>                                                                 │
│  <td>列一</td>                                                             │
│  <td>列二</td>                                                             │
│</tr></table>                                                               │
└──────────────────────────────────────┘
  (2) divタグを二階層にするパターン(階層が深くなる点が難だがわかりやすい)
┌──────────────────────────────────────┐
│<div style="height:16px;">                                                  │
│  <div style="float:left;">列一</div>                                       │
│  <div style="float:left;">列二</div>                                       │
│</div>                                                                      │
└──────────────────────────────────────┘
  (3) 「clear:both;」を使うパターン(階層は浅いが列幅指定に難あり(後述))
┌──────────────────────────────────────┐
│<div style="float:left;">列一</div>                                         │
│<div style="float:left;">列二</div>                                         │
│<div style="clear:both;"></div>                                             │
└──────────────────────────────────────┘
【固定】
  (4) 「position:absolute」で位置固定で前面に乗せる感じにする
┌──────────────────────────────────────┐
│<div style="position:relative;">                                            │
│  <div style="position:absolute;left:0;width:■px;">列一</div>              │
│  <div style="margin-left:■px;">列二</div>                                 │
│</div>                                                                      │
└──────────────────────────────────────┘
  (5) 「float:left」で前面に乗せる感じにする
┌──────────────────────────────────────┐
│<div style="float:left;width:■px;">列一</div>                              │
│<div style="margin-left:■px;">列二</div>                                   │
└──────────────────────────────────────┘
【画面全体を縮小した場合の挙動】
  (1)→左列、右列とも同じ幅となり、それぞれ改行される
  (2)→右列全体が改行されて次行に回り込む形となる
  (3)→右列全体が改行されて次行に回り込む形となる
  (4)→左列は列幅指定されているので固定となる、右列がその割をくらって改行に
  (5)→左列は列幅指定されているので固定となる、右列がその割をくらって改行に
  それぞれに列幅を固定で指定すれば、改行や回り込みは発生しない
  但し、(3)は全体を統括する幅が指定できないので、
  おのおの(左列、右列)の幅を指定しても回り込みとなってしまう
分類:CSS