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 提供支持

极好的。在这种情况下，您可以使用display: table(IE7 中不支持) 和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 回答