html - 页脚中并排的文本块

Question

我正在努力实现这样的目标..

http://line25.com/在页脚中看到他有“关于 Line25”然后是“最受欢迎的帖子”，并排在一起的文本块？

我在页脚中执行此操作，并且在较小的屏幕分辨率上它会到处移动。

http://akaleez.co.uk/Templates/1/

Answer 1

将盒子放在包装器 div 中并像这样居中：

.wrapper {
margin:0 auto;
display:table;
}

显示表将使其与 3 个框一样宽。接下来删除第一个框的边距。

目前它有 180px 的边距，如果屏幕比预期的更小或更宽，它显然不会正确居中。

Answer 2

它“到处移动”的原因是您width: 100%为页脚指定。当视口的宽度小于三个文本块的宽度时，其中一个将显示在另外两个下方。

在文本块周围添加另一个包装器，如下所示：

<div id="foot">
  <div id="footer-wrapper">
    <div class="box1">...</div>
    <div class="box2">...</div>
    <div class="box3">...</div>
  </div>
</div>

然后将以下内容添加到您的 CSS 定义中：

#footer-wrapper {
  min-width: 990px;
  margin-left: 180px;
}

然后margin-left从.box1.

请注意，这将强制您的整个页面为 1170 像素宽，并且如果没有足够的空间来显示所有页面，则在窗口底部显示一个滚动条。如果不想这样，请尝试将其添加到您的 CSS 中：

#foot {
  overflow: hidden;
}