0

早上好，

我正在使用纯 CSS 开发一个四列页脚，但我遇到了一些问题：1）我无法在每列旁边设置垂直 1px 白色规则 2）背景不覆盖整个四列 3）在 Chrome 中，列没有出现在一个单一的宽度上，第四个被撞到下面。

这是我的代码：http: //jsfiddle.net/eLzPk/

4

3 回答 3

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 模型，它还没有多少支持。但值得一看。它允许您拥有任何大小的容器，并使用比率调整其中的子项大小，轻松地将它们垂直或水平放置等。它解决了盒子模型问题以及各种定位和居中问题。

于 2012-10-09T23:43:55.067 回答
0

这样的事情怎么样？在其中添加另一个具有固定大小的 Div 容器，以适应浏览器的大小。然后可以使用#footer 中的注释代码拉伸背景。创建 div 大小时，您必须注意边距、填充和边框。

每个像素都很重要；）

希望这有帮助的任何人！底部的 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/

于 2012-10-09T23:55:55.960 回答
0

正如 ACJ 所说：

边框宽度（1 像素）加到宽度上，所以四倍 25% 加上 4 像素总是大于 100%

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

您的速记边框属性不起作用，因为尽管您定义了宽度（1px），它的类型（实心），但您缺少（颜色）。

如果您也在使用 HTML5，您也可以使用该标签...

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

于 2012-10-10T00:04:53.220 回答