在页脚并排的文本块

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;
}