Question

所以我试图将一个页面（实际上只是一个页脚）划分为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的一部分，但是我正在尝试做我刚才提到的。

解决了问题：在块中添加了额外的填充;

Answer 1

不，我根本不会提供对IE的支持

优秀。在这种情况下，您可以使用display: table（IE7中不支持）以及table-layout: fixed（to ensure等宽列）。

自动支持任意数量的列，作为奖励，您可以免费获得相等的高度列。

以下是您的HTML演示：http://jsfiddle.net/thirtydot/KusjP/

.navigation {
    display: table;
    table-layout: fixed;
    width: 100%;
}
.navigation > a {
    display: table-cell;
    border: 1px solid #444;
}

Answer 2

KISS

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;
}

在8个完美的流体柱中划分页面？

2 个答案: