0

流動レイアウト Web ページのフッターを開発しています。html は次のとおりです。

<div id="footer">
    <div id="lists">
        <div class="list1" id="list-sep">
            <p id="footer-par">
                Lorem Ipsum<br />
                Lorem Ipsum<br />
                Lorem Ipsum Lorem Ipsum<br />
                Lorem Ipsum<br />
                Lorem Ipsum Lorem Ipsum<br />
                PEC<br />
                Lorem Ipsum<br />
                <br />
                &copy; region<br />
            <p>
        </div>
        <div class="list1" id="list-sep">
            <ul>
                <li class="footer-point">President</li>
                <li class="footer-point">Lorem Ipsum</li>
                <li class="footer-point">Lorem Ipsum</li>
                <li class="footer-point">Lorem Ipsum Lorem Ipsum</li>
                <li class="footer-point">Lorem Ipsum Lorem Ipsum Lorem Ipsum</li>
                <li class="footer-point">Lorem Ipsum Lorem Ipsum Lorem Ipsu</li>
                <li class="footer-point">Lorem Ipsum Lorem Ipsum</li>

            </ul>
        </div>
        <div class="list1" id="list-sep">
            <ul>
                <li class="footer-point">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</li>
                <li class="footer-point">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</li>
                <li class="footer-point">Lorem Ipsum Lorem Ipsum</li>
                <li class="footer-point">Lorem Ipsum Lorem Ipsum</li>
            </ul>
        </div>
        <div class="list1">
            <ul>
                <li class="footer-point">Lorem Ipsum</li>
                <li class="footer-point">Lorem Ipsum Lorem Ipsum</li>
                <li class="footer-point">Lorem Ipsum</li>
                <li class="footer-point">Lorem Ipsum </li>
                <li class="footer-point">Lorem Ipsum </li>
            </ul>
        </div>
        <hr />
</div>

CSS は次のとおりです。

@charset "UTF-8";
/* CSS Document */

* {
    margin:0;
    padding:0;
}

#footer {


    height:auto;
    width:100%;
    float:left;
    margin-top:40px;


}

#lists {

    width:75%;

    height:auto;
    margin:20px auto 0 auto;



}



.list1 {


    float:left;
    width:20%;
    height:100%;
    min-height:116px;
    display:block;
    padding-left:4%;
    /*padding-bottom:44px;*/
    /*padding-top:21px;*/


}


#list-sep {

    border-right:1px solid #CCCCCC;


}

.footer-point {

    display:block;
    margin-top:5px;
    font-family:'Myriad Pro';
    font-size:0.6em;
    color:#CCC;
}

#footer-par {

    margin-top:20%;
    margin-bottom:20%;
    font-family:'Myriad Pro';
    font-size:0.6em;
    color:#CCC;

    height:100%;

}

ul {


    margin-top:20%; 
    margin-bottom:20%;

}

列の高さと幅は (ブラウザー ウィンドウのサイズを変更するとき) 内部のテキストの量に合わせて調整する必要がありますが、3 つの区切り記号は同じ高さでなければなりません。さらに、ブラウザのサイズを変更するときは、テキストの量に基づいて 3 つのセパレータの高さを調整する必要がありますが、同じ高さでなければなりません。つまり、区切り文字は、ほとんどのテキストを含む列に適応する必要があります。誰でも私を助けることができますか？どんな助けでも大歓迎です。

4

1 に答える 1

0

display: tableここで必要なのはCSSです。例えば

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">
@charset "UTF-8";
/* CSS Document */

* {
    margin:0;
    padding:0;
}

#footer {
    height:auto;
    width:100%;
    float:left;
    margin-top:40px;
}

#lists {
    display: table;
    width:75%;
    height:auto;
    margin:20px auto 0 auto;
    border-bottom: 1px solid #ccc;
}

.list1 {
    display: table-cell;
    width:20%;
    padding:4%;
}


#list-sep {
    border-right:1px solid #CCCCCC;
}

.footer-point {
    display:block;
    margin-top:5px;
    font-family:'Myriad Pro';
    font-size:0.6em;
    color:#CCC;
}

#footer-par {
    margin-top:20%;
    margin-bottom:20%;
    font-family:'Myriad Pro';
    font-size:0.6em;
    color:#CCC;
    height:100%;
}

ul {
    margin-top:20%; 
    margin-bottom:20%;
}
</style>

</head>
<body>

<div id="footer">
    <div id="lists">
        <div class="list1" id="list-sep">
            <p id="footer-par">
                Lorem Ipsum<br />
                Lorem Ipsum<br />
                Lorem Ipsum Lorem Ipsum<br />
                Lorem Ipsum<br />
                Lorem Ipsum Lorem Ipsum<br />
                PEC<br />
                Lorem Ipsum<br />
                <br />
                &copy; region<br />
            <p>
        </div>
        <div class="list1" id="list-sep">
            <ul>
                <li class="footer-point">President</li>
                <li class="footer-point">Lorem Ipsum</li>
                <li class="footer-point">Lorem Ipsum</li>
                <li class="footer-point">Lorem Ipsum Lorem Ipsum</li>
                <li class="footer-point">Lorem Ipsum Lorem Ipsum Lorem Ipsum</li>
                <li class="footer-point">Lorem Ipsum Lorem Ipsum Lorem Ipsu</li>
                <li class="footer-point">Lorem Ipsum Lorem Ipsum</li>

            </ul>
        </div>
        <div class="list1" id="list-sep">
            <ul>
                <li class="footer-point">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</li>
                <li class="footer-point">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</li>
                <li class="footer-point">Lorem Ipsum Lorem Ipsum</li>
                <li class="footer-point">Lorem Ipsum Lorem Ipsum</li>
            </ul>
        </div>
        <div class="list1">
            <ul>
                <li class="footer-point">Lorem Ipsum</li>
                <li class="footer-point">Lorem Ipsum Lorem Ipsum</li>
                <li class="footer-point">Lorem Ipsum</li>
                <li class="footer-point">Lorem Ipsum </li>
                <li class="footer-point">Lorem Ipsum </li>
            </ul>
        </div>
</div>

</body>
</html>
于 2013-04-30T00:37:47.617 に答える