0

我正在用 CSS 开发一个 4 列的页脚，但是在与这个搏斗了几个小时之后，有两件事我无法实现。

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

2) 将垂直边框延伸整个 250px。

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

http://jsfiddle.net/FdHAR/

4

4 回答 4

2

最好的办法是添加一个类，可能footer-column，您将其应用于每个divs. 然后把这四个divs放在一个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。但我假设你这样做，因为你在问题中陈述了一个特定的价值。

于 2012-10-05T03:18:27.140 回答
1

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

于 2012-10-05T03:08:49.647 回答
0

1) 添加

padding-left: 15px;

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

2）添加高度：250px；到 #container4 以使其大小合适。

警告：这是在对 safari 进行了几分钟调整之后——您的浏览器可能会有所不同......

于 2012-10-05T03:25:14.340 回答
0

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

jsFiddle

一些建设性的反馈：

  • 尝试尽可能多地结合你的风格。无需跨相似元素重新编写和重新设置填充等。
  • 你有 div，在 div 里面，但是却把它们当作列。一种更简单的方法是使用列表并将每个列表项视为一列。如果你想做 div，那么不要把它们放在一起。
  • 我喜欢使用 em 来设置字体大小或行高，但使用 px 来设置其他任何东西。（个人喜好，有道理，因为它是您通常工作的屏幕）
  • 尝试仅设置 1 或 2 个特定的严格尺寸，然后使用其中的百分比。一个好的想法是将页脚字体大小设置为 1.2em，然后 h1 可以是字体大小的 130%，更小的可以是 80%。这也适用于宽度等（每列是父级的 25%）。
  • 一个 jsFiddle 提示，你不需要把整个 html 文档放在那里，只是你想要摆弄的部分，对于 css 和 jquery 一样，删除 ,.
于 2012-10-05T03:37:23.523 回答