Question

早上好，

我正在使用纯CSS开发一个四列页脚，但我遇到了一些问题： 1）我不能在每个柱子旁边制定垂直的1px白色规则 2）背景不包括整个四个列 3）在Chrome中，列不会出现在一个宽度上，第四个列在下面碰撞。

Answer 1

如果您知道页脚的确切宽度，则可以使用纯CSS执行此操作。我刚刚在前3列添加了右边框。仅供参考，你忘记在你的CSS中声明边框的颜色。我还将列的宽度更改为235px，即940 / 4.前3个具有1px边框，因此它的宽度：234px加上边框。这是小提琴http://jsfiddle.net/eLzPk/7/

#footer dl {
    background: black;
    float: left;
    margin: 0;
    padding: 10px 0 5px 0;
    width: 234px;
    border-right: 1px solid #fff;
}

#footer dl + dl + dl + dl {
    width: 235px;
    border-right: none;
}

修改

进一步解释css的一个问题是边框和边距被添加到声明的宽度，所以如果你有四个宽度为25％的边和1px的边框来创建一个分界线，它实际上是100％+ 3px，当然大于100％，因此它会导致css换行。

在css中有2个新的解决方案，其中一个得到了相当的支持，它被称为box-sizing，这里有一篇很好的参考文章。 http://css-tricks.com/box-sizing/基本上它将框大小调整为声明的宽度，并在其中添加边框和边距。缺点是IE7不支持它。因此，要正确使用它，最好使用IE条件语句并为这些浏览器实现一些css / js hack。

另一个解决方案是flexbox模型，它几乎没有支持。但是值得一看。它允许您拥有任何尺寸的容器，并使用比例调整其内部的子容量，轻松地将它们垂直或水平放置等。它解决了盒子模型问题以及各种定位和居中问题。 / p>

Answer 2

这样的事情怎么样？添加另一个具有固定大小的Div容器，该容器将根据浏览器的大小进行调整。然后可以使用#footer中的注释代码来拉伸背景。你必须要知道你的边距，填充和创建div大小时的边框。

每个像素都很重要;）

Anywho希望这会有所帮助！链接jsFiddle在底部

#footer {
    background: black

    /* This would be your Background Image code for whole Footer.
    background: url(FOOTER IMAGE) no-repeat center center fixed;             
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
   */

    padding-right: 15px;
    position: relative;
    min-height: 250px;
    text-align: center;
    width:100%;
    margin-left:auto;
    margin-right:auto;
} /*IE6*/
#footerContainer {
    width:940px;
    height:250px;
    display:block;
}

#footer dl {
    display:inline-block;        
    background: black;
    float: left;
    text-align: left;
    margin: 0px;
    padding: 10px 0 5px 10px;
    width: 224px; /* Take into account the 1px Border & padding*/
    height:inherit;
    border-left: 1px solid white;
}

这样的事情：http://jsfiddle.net/GFargo/eLzPk/1/

Answer 3

正如ACJ所说：

边框宽度（1像素）添加到宽度，因此四倍25％加上4个像素总是超过100％

最好定义一些设定值来解决这个问题。

您的速记边框属性无效，因为虽然您定义了宽度（1px），其类型（实体），但您缺少（颜色）。

如果你还在使用HTML5，你也可以使用标签......

粗略地说，经过一些调整： http://jsfiddle.net/eLzPk/8/

CSS中的四个Col Footer

3 个答案: