CSS中的4列页脚

Question

我正在用CSS开发一个4列的页脚，但经过几个小时的努力之后，有两件事我做不到。

1)复制三个后续列中第一列的填充

2)将垂直边框扩展整个250px。

有谁有什么想法吗？以下是我的代码

http://jsfiddle.net/FdHAR/

Answer 1

你想使用display: table和display: table-cell：http://jsfiddle.net/FdHAR/3/

Answer 2

这里最好的做法是添加一个应用于每个divs的类，可能是footer-column。然后将这四个divs放在一个包含footer类的div中。您的结构将如下所示：

<div class="footer">
  <div class="footer-column" id="footer_column1">...</div>
  <div class="footer-column" id="footer_column2">...</div>
  <div class="footer-column" id="footer_column3">...</div>
  <div class="footer-column" id="footer_column4">...</div>
</div>

显然，我们需要改变样式以使其看起来正确。

填充

让我们首先解决填充问题:您真正需要做的就是选择类，并在其上添加一些padding-left和padding-right。它将以这种方式自动将相同的填充应用于每个应用程序。此外，为了让它们并排出现，我们需要对它们执行float。下面这样的代码就可以了：

.footer-column {
  float: left; // Push the div as far up-left as it can be put 
  width: 25%; // Make sure to subtract the padding
  padding: 10px; // We want padding on all sides to make things look nice
}

现在已经完成了，让我们来修复边界。

垂直边框

这有点困难，除非你知道页脚的整体高度。无论哪种方式，我们都可以使用CSS选择器:first-child来应用边框。这应该可以做到：

.footer-column {
  ...
  border-left: 1px solid black; // Whatever border you want goes here.
}

.footer-column:first-child {
  border-left: none;
}

如果你知道页脚的高度，你可以强制这个高度，边框就会工作得很好。

.footer-column {
  ...
  height: 250px; // Force the box to be 250px tall
}

如果您不知道页脚的高度，您将不得不使用一些其他样式和可能的javascript。但我假设你有，因为你在问题中陈述了一个特定值。

Answer 3

1)添加

padding-left: 15px; 

to #col2,3,4将文本移出垂直白条。您可能需要使用该值来获得所需的确切间距。

2)将height: 250px；添加到#container4中，大小合适。

注意:这是在safari上调整了几分钟之后--您的浏览器可能会有所不同...