2006年12月29日 09:00
以前、中央を可変でのリキッドレイアウトについて書きましたが、とあるmixiのコミュ内で、両端を可変にするリキッドレウアウトについて書かれていたので、面白くて自分も作ってみました。（mixiコミュのがもっと高度でしたが）
3カラムレイアウトで、両端を可変にする。（リキッドレイアウト）サンプル
▼解説は以下から。
▼EntryMore▼
簡単に説明すると、左側のbox、中央のbox、右側のboxをそれぞれdivで定義。
そして中央にだけ固定幅を設定し、両端のboxには幅50%を指定。
そして左側boxと、中央boxにfloat:leftを定義。右側boxにはfloat:rightを定義。
ただ、これだけではカラム落ちしてしまうので、ここでちょっと工夫をします。
まず、左側と右側の中にp要素を配置します。
そして、左側boxのdivにネガティブマージン（margin: -○px）を設定。
（※○は、固定幅にした中央boxの幅の半分の値）
さらに、左側box内のp要素に上で設定したネガティブマージン分、今度は普通にマージンを取る。
そうすることで、中央boxの中身が左側にかぶさってきます。
ただ、pに対してマージンを取らないと内容が重なってしまうため、pに対して通常のマージンを取ることでこれを回避します。
あとは、右側にこれとまったく逆の設定をするだけです。
まとめると、両端の幅を50%に設定したあとで、中央box分の領域を無理矢理こじあけることで、両端がリキッドレイアウトになる、ということです。
トラックバックURL
http://css-eblog.com/cgi-bin/mt/mt-tb.cgi/32
©2008 CSS-EBLOG. All Rights Reserved
