2009-10-14

StyleSheet: 高さの異なるカラムを揃える

まさにタイトルどおりの話。
この辺を参考にした。

なるほど、:afterを隠しておいて、必要になったら勝手に表示といた感じかな?
かなり面白い。多分高さ32768pxまで対応してるんだろう。なぜこの数値なのかはよく分からんが?
ブラウザが認識する最大値かな?

ソースが載ってなかったので載せておこう。
#content {
    text-align: center;
    margin:0 auto;
    overflow:hidden;
    /* width: 700px; *//*これ僕は必要なかったので削除*/
}
#content:after {
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}

#column1, #column2, #column3{
    float:left;
    padding-bottom:32768px;
    margin-bottom:-32768px;
}

#column1 {
    float: left;
    width: 20%;
}

#column2 {
    float: left;
    width: 40%;
}

#column3 {
    float: left;
    width: 35%;
}
幅は適当に変えた。
後は、それぞれのIDを持つHTML要素を作るだけ。
ずっと探していたがようやっと見つかったわぁ。
(前にも見つけた気はするが・・・)

タグがprogramになってるけど、あまりそれ以外に選択肢がなかったから・・・
(増やしたくないという理由で・・・)

No comments:

Post a Comment