Question

我正在使用CSS开发一个4列的页脚，但是在与它进行了几个小时的摔跤后，有两件事我无法实现。

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

2）扩展整个250px的垂直边框。

有没有人有任何想法？这是我的代码

Answer 1

这里最好的做法是添加一个类，可能是footer-column，您应用于每个divs。然后将这四个divs放在div的{{1}}类中。你的结构看起来像这样：

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

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

垂直边界

这有点困难，除非你知道页脚的整体高度。无论哪种方式，我们都可以使用CSS选择器.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 }来应用边框。这应该这样做：

:first-child

如果你知道页脚的高度，你可以强制该高度，边框将正常工作。

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

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

如果你不知道页脚的高度，你将不得不使用其他一些样式和可能的JavaScript。但是我会假设你这样做，因为你在问题中说明了具体的价值。

Answer 2

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

Answer 3

1）添加

padding-left: 15px;

到＃col2,3,4将文本从垂直白条移开。您可能需要使用该值来获得您正在寻找的确切间距。

2）增加高度：250px; ＃container4使其尺寸合适。

警告：这是在调整Safari之后几分钟 - 您的浏览器可能会有所不同......

Answer 4

稍微玩了一下，我认为这更接近你想要的，并且应该在浏览器中运行良好。我建议在页脚上使用固定宽度或最小宽度（<footer>是html5）。

jsFiddle

一些建设性的反馈：

尝试尽可能地结合您的风格。无需在类似元素中重写和重新设置填充等。
你在div里面有div，但却像列一样对待它们。一种更简单的方法是使用列表并将每个列表项视为一列。如果你想做div，那就不要把它们放在彼此里面。
我喜欢用em来设置font-size或line-height，但是使用px来做其他事情。（个人喜好，因为它是你经常工作的屏幕才有意义）
尝试仅设置1或2个特定的严格大小，然后使用其百分比。一个好的想法是将页脚字体大小设置为1.2em，然后h1可以是130％的字体大小，小的可以是80％。这也适用于宽度等（每列占父级的25％）。
一个jsFiddle提示，你不需要把整个html doc放在那里，只需要你想要的部分，同样的css和jquery放弃，。

4 CSS中的列页脚

4 个答案:

填充

垂直边界