1

だから私はページ（実際にはフッターだけ）を8つの等しい流動的な列（私は6を目指していた）に分割しようとしています.

width: 12.5%;各列 (実際には一部のリンクが として設定されています)にパーセンテージを設定しましたdisplay: block; float: left;が、機能するはずでしたが、機能しませんでした。つまり、列またはリンクはページ内で均等に分割されているはずですが、まだある程度のスペースがあり100pxます (私の画面1366pxの幅は )。

それで、私はそれについて何をすべきですか？リンク/カラムを 8 つ (できれば 6 つ) の流体カラムに分割するにはどうすればよいですか?

<footer>
    <div class="footer-jigsaw"></div>
    <div class="footer-wrapper">
        <nav class="navigation">
            <a href=""></a>
            <a href=""></a>
            <a href=""></a>
            <a href=""></a>
            <a href=""></a>
            <a href=""></a>
        </nav>
    </div>
</footer>

footer {
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:50px;
    background-image:url(../gfx/background-light.png);
    background-position:center center;
    background-repeat:repeat;
    -webkit-opacity:0;
    -moz-opacity:0;
    opacity:0;
    filter:alpha(opacity=0);
}

footer .footer-jigsaw {
    position:absolute;
    top:0;
    width:100%;
    height:10px;
    background-image:url(../gfx/footer.png);
    background-position:0 center;
    background-repeat:repeat-x;
    z-index:5;
}

footer .footer-wrapper {
    position:relative;
    margin:0 auto;
    width:100%;
    height:50px;
}

footer .footer-wrapper .navigation {
    position:relative;
    margin:0 auto;
    width:100%;
    height:50px;
}

footer .footer-wrapper .navigation a {
    position:relative;
    float:left;
    display:block;
    cursor:pointer;
    width:12.5%;
    height:50px;
    padding-top:0;
    padding-left:10px;
    padding-right:10px;
    padding-bottom:0;
    font-family:good-times-bad-times;
    font-size:inherit;
    font-style:normal;
    font-weight:400;
    font-variant:normal;
    text-align:center;
    text-decoration:none;
    text-shadow:none;
    text-indent:inherit;
    text-transform:none;
    word-spacing:normal;
    line-height:58px;
    letter-spacing:normal;
    color:#fff;
    -webkit-transition:all .35s ease-in-out;
    -moz-transition:all .35s ease-in-out;
    -ms-transition:all .35s ease-in-out;
    -o-transition:all .35s ease-in-out;
    transition:all .35s ease-in-out;
}

footer .footer-wrapper .navigation a:first-child {
    border:none;
}

footer .footer-wrapper .navigation a:last-child {
    border:none;
}

footer .footer-wrapper .navigation a.jp-current {
    background-color:rgba(0,0,0,0.2);
    font-family:good-times-bad-times;
    font-size:inherit;
    font-style:normal;
    font-weight:400;
    font-variant:normal;
    text-align:center;
    text-decoration:none;
    text-shadow:none;
    text-indent:inherit;
    text-transform:none;
    word-spacing:normal;
    line-height:58px;
    letter-spacing:normal;
    color:#00b8f0;
}

footer .footer-wrapper .navigation a.jp-current:hover {
    background-color:rgba(0,0,0,0.2);
    font-family:good-times-bad-times;
    font-size:inherit;
    font-style:normal;
    font-weight:400;
    font-variant:normal;
    text-align:center;
    text-decoration:none;
    text-shadow:none;
    text-indent:inherit;
    text-transform:none;
    word-spacing:normal;
    line-height:58px;
    letter-spacing:normal;
    color:#00b8f0;
}

footer .footer-wrapper .navigation a:hover {
    background-color:rgba(0,0,0,0.2);
    font-family:good-times-bad-times;
    font-size:inherit;
    font-style:normal;
    font-weight:400;
    font-variant:normal;
    text-align:center;
    text-decoration:none;
    text-shadow:none;
    text-indent:inherit;
    text-transform:none;
    word-spacing:normal;
    line-height:58px;
    letter-spacing:normal;
    color:#00b8f0;
}

上記はすべての CSS の一部ですが、今述べたことを実行しようとしているところがあります。

問題解決: ブロックに余分なパディングが追加されました。

4

2 に答える 2

2

いいえ、IE のサポートは一切提供しません

素晴らしい。その場合、 (IE7 ではサポートされていません) を(列の幅を等しくするためdisplay: tableに) と共に使用できます。table-layout: fixed

任意の数の列が自動的にサポートされ、おまけとして同じ高さの列を無料で入手できます。

HTML を使用したデモは次のとおりです: http://jsfiddle.net/thirtydot/KusjP/

.navigation {
    display: table;
    table-layout: fixed;
    width: 100%;
}
.navigation > a {
    display: table-cell;
    border: 1px solid #444;
}
于 2012-05-03T16:18:39.820 に答える
1

接吻

http://jsfiddle.net/QjsSA/1/

彼の元のコードを使用: http://jsfiddle.net/QjsSA/2/

<footer>
    <div class="footer-jigsaw"></div>
    <div class="footer-wrapper">
        <nav class="navigation">
            <a href="">Fluid Column Fluid Column Fluid Column Fluid Column Fluid Column</a>
            <a href="">Fluid Column</a>
            <a href="">Fluid Column Fluid Column Fluid Column Fluid Column</a>
            <a href="">Fluid Column</a>
            <a href="">Fluid Column Fluid Column Fluid Column</a>
            <a href="">Fluid Column</a>
        </nav>
    </div>
</footer>

CSS

.navigation {
    overflow: auto;
    background: gray;   
}

.navigation a {
    width: 16.6%;
    float: left;
    display: block;
    border-bottom: 1px solid black;
}
​

</p>

于 2012-05-03T16:12:03.900 に答える