Fatal编程技术网
  • css/
  • Css 将一页分成8个完美的流体列？

Css 将一页分成8个完美的流体列？

css less

Css 将一页分成8个完美的流体列？,css,less,fluid-layout,Css,Less,Fluid Layout,所以我试图将一个页面（实际上只是一个页脚）分成8个相等的流动列（我的目标是6个），我认为我能做到的唯一方法是百分比 我设置了宽度的百分比：12.5%到每个列（实际上是一些链接设置为显示：block；float:left；），它应该工作，但没有。我的意思是，页面中的列或链接应该平均分配，但仍然有一些空间，大约是100px（我的屏幕宽度为1366px） 那我该怎么办呢？当8个（最好6个）流体柱相等时，如何划分链接/柱 <footer> <div class="footer-

所以我试图将一个页面（实际上只是一个页脚）分成8个相等的流动列（我的目标是6个），我认为我能做到的唯一方法是百分比

我设置了
宽度的百分比：12.5%到每个列（实际上是一些链接设置为
显示：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;
}




页脚{
位置：绝对位置；
底部：0；
左：0；
宽度：100%；
高度：50px；
背景图像：url（../gfx/background light.png）；
背景位置：中心；
背景重复：重复；
-webkit不透明度：0；
-moz不透明度：0；
不透明度：0；
过滤器：alpha（不透明度=0）；
}
页脚拼图{
位置：绝对位置；
排名：0；
宽度：100%；
高度：10px；
背景图像：url（../gfx/footer.png）；
背景位置：0中心；
背景重复：重复-x；
z指数：5；
}
页脚包装器{
位置：相对位置；
保证金：0自动；
宽度：100%；
高度：50px；
}
页脚.页脚包装器.导航{
位置：相对位置；
保证金：0自动；
宽度：100%；
高度：50px；
}
footer.footer wrapper.navigation a{
位置：相对位置；
浮动：左；
显示：块；
光标：指针；
宽度：12.5%；
高度：50px；
填充顶部：0；
左侧填充：10px；
右边填充：10px；
填充底部：0；
字体系列：好时光坏时光；
字体大小：继承；
字体风格：普通；
字体大小：400；
字体变体：正常；
文本对齐：居中；
文字装饰：无；
文本阴影：无；
文本缩进：继承；
文本转换：无；
字距：正常；
线高：58px；
字母间距：正常；
颜色：#fff；
-webkit过渡：所有.35都易于输入输出；
-moz过渡：所有.35秒都易于输入输出；
-ms转换：所有.35秒轻松输入输出；
-o型过渡：全部.35秒缓进缓出；
过渡：所有.35都易于输入输出；
}
footer.footer wrapper.navigation a:第一个子项{
边界：无；
}
footer.footer wrapper.navigation a:最后一个子项{
边界：无；
}
footer.footer wrapper.navigation a.jp-current{
背景色：rgba（0,0,0,0.2）；
字体系列：好时光坏时光；
字体大小：继承；
字体风格：普通；
字体大小：400；
字体变体：正常；
文本对齐：居中；
文字装饰：无；
文本阴影：无；
文本缩进：继承；
文本转换：无；
字距：正常；
线高：58px；
字母间距：正常；
颜色：#00b8f0；
}
footer.footer wrapper.navigation a.jp-current:悬停{
背景色：rgba（0,0,0,0.2）；
字体系列：好时光坏时光；
字体大小：继承；
字体风格：普通；
字体大小：400；
字体变体：正常；
文本对齐：居中；
文字装饰：无；
文本阴影：无；
文本缩进：继承；
文本转换：无；
字距：正常；
线高：58px；
字母间距：正常；
颜色：#00b8f0；
}
页脚.页脚包装器.导航a:悬停{
背景色：rgba（0,0,0,0.2）；
字体系列：好时光坏时光；
字体大小：继承；
字体风格：普通；
字体大小：400；
字体变体：正常；
文本对齐：居中；
文字装饰：无；
文本阴影：无；
文本缩进：继承；
文本转换：无；
字距：正常；
线高：58px；
字母间距：正常；
颜色：#00b8f0；
}


上面是所有CSS的一部分，但我正试图做我刚才提到的事情

问题解决：向块添加额外填充


使用他的原始代码：

​

不，我不会为IE提供任何支持

太棒了。在这种情况下，您可以使用
display:table
（IE7中不支持）以及
table layout:fixed
（等宽列）

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

以下是您的HTML的演示：


.navigation{
显示：表格；
表布局：固定；
宽度：100%；
}
.导航>a{
显示：表格单元格；
边框：1px实心#444；
}

向我们展示代码，否则我们可能无法提供帮助。是启动Twitter引导或960网格系统的好地方。不要重新发明轮子。@binarious-我并不是要对我所有的页面都这样做，我只想对页脚这样做，块之间没有空格，没有空白，没有边距，只有6到8个简单的块，它们沿页面宽度均匀分布。我知道bootstrap，但是我不喜欢使用任何框架（虽然听起来很愚蠢）。你也可以发布页脚的基本HTML吗？这可能是相关的。一个JSFIDLE或链接到一个实时页面就更好了。此外，这个计划是CSS还是您使用较少的还是Sass/SCS？如果它是通用CSS，那么你会遇到一些CSS问题。我使用的较少，但它是由插件生成的HTML，无论如何，我会将它的输出粘贴到浏览器中。理想情况下，你应该在回答中包含演示中的代码。（我没有投反对票。）没错。如果你的答案是错误的，那么你的答案毫无意义。请这样做，我将取消我的投票。这是我正在做的同样的事情，但同样的结果。还有，我把元素移到左边。罗兰，它在做什么？那是不正确的？试着只使用标准css，而不是更少的部分不，它现在可以工作了，如果你仔细看我的代码，我添加了一些像素填充，这就是它不工作的原因。只是现在很难将100%除以6个街区，这根本不起作用。有8个街区会更好

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



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

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