将页面分成8个完美的流体柱? [英] Divide a page in 8 perfect fluid columns?
问题描述
所以我试图把一个页面(实际上只是一个页脚)分成8个相等的流体柱(我的目标是6),我唯一的方式,我想我能做到的是百分比。
So I'm trying to divide a page ( in fact just a footer ) into 8 equal fluid columns ( I was aiming for 6 ), and the only way I thought I could do it is with percentage.
我为每个列设置了 width:12.5%;
的百分比(实际上一些链接设置为 display:block; float:left;
),它应该已经工作,但它没有。我的意思是列或链接应该在页面中平均分配,但仍然有一些空间, 100px
(我的屏幕有 1366px
in width)。
I set a percentage of width: 12.5%;
to each of the columns ( which are in fact some links set as display: block; float: left;
) and it should have worked, but it didn't. I mean the columns or links should have been equally divided in the page but there's still some space there, about 100px
( my screen has 1366px
in width ).
那么我该怎么办呢?如何划分链接/列是8(最好是6)相等的流体列?
So what should I do about that ? How can I divide the links / columns is 8 ( preferably 6 ) equal fluid columns ?
<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的一部分,
Above is a part of all the CSS, but there's where I'm trying to do what I just mentioned.
推荐答案
KISS
使用原始代码: 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个完美的流体柱?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!