html - 4 CSS 中的列页脚

Question

我正在用 CSS 开发一个 4 栏的页脚，但在为此奋斗了几个小时之后，有两件事我无法实现。

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

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

有人有什么想法吗？这是我的代码

http://jsfiddle.net/FdHAR/

Answer 1

这里最好的做法是添加一个类，可能是 footer-column，您可以将其应用到每个 div。然后将这四个 div 放在 div 中，类为 footer。您的结构看起来像这样:

<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。但我会假设你这样做，因为你在问题中陈述了一个特定的值(value)。