1

所以基本上我有 3 个内联块 div，它们是这样水平堆叠的：

div1——div2——div3

div1 和 div3 是摩天大楼广告，而 div2 是我的主要内容包装器。我最初遇到的问题是，每当我调整窗口大小以使其宽度小于 div 的宽度组合时，div2 和 div3 将换行到 div1 下方的下一行，因为它们不适合同一行（查看时出现同样的问题来自智能手机或平板电脑的网站，因为它们的宽度很小），而 div1（一个广告）会笨拙地放在主页中央。我通过添加white-space: nowrap到 body 标签以防止 div 包装并添加white-space: normalcontent-wrapper div 以防止它从 body 元素继承，以便内容文本可以正常换行。这解决了问题，现在当我访问该网站时，无论浏览器宽度如何，三个 div 始终位于同一行，并且如果需要，还有一个水平滚动条。

但是，滚动条总是从左侧开始，所以我的内容包装器（div2）是我应该居中的主要内容。相反，div1（广告）首先出现在左侧，然后是内容包装器。我该如何纠正这种情况？我知道如果我要摆脱正文上的自动换行，div 将按照我想要的方式居中，但这会带回最初不应该换行的 div 换行问题。无论如何我可以使用CSS解决这两个问题吗？

4

1 回答 1

1

我曾经做过类似的事情，我需要一列偏移到主要内容区域的右侧。将列放在右侧很容易，但真正的技巧是防止它影响页面的溢出/滚动。

解决方案是将以下两个属性添加到包含我的主要内容和列的容器中：

#wrap { 
    min-width: 960px; 
    overflow-x: hidden; 
}

我已经对此进行了调整，以展示如何在 3 列布局中使用它，两边各有两座摩天大楼：DEMO

于 2012-08-11T04:23:31.340 回答