使用CSS和Div来制作两列布局

Question

我对css定位仍然比较陌生，但已阅读了几本书并观看了一些教程。我在colourLovers上制作了一些调色板，并想看看它们作为配色方案应用于网站时的外观。所以，使用我的小编码知识，我创建了一个页面来演示我的配色方案。过了一会儿，它变成了一种自信心，当一件小事引起我的注意时，我已经完成了它。

我有一个双列布局 - 左边是导航菜单，上面有一个标题，右边有一个内容部分，都在他们自己的div中。我的问题是这样的 - 当我缩放页面时（如在缩小窗口中，使窗口更小），内容部分被推送，因此它包裹在Div下面。我可以解决这个问题的方法是制作一个没有bg颜色的额外div，并使其与包含导航div的内容一样长，这样它们就会排成一行，但是如果你调整窗口大小，它就无法修复它。 / p>

我确信这有一个简单的解决办法，但我的知识有限还不知道。如果它有帮助，我在我的编辑器（Coda）中附加了一个图像文件，该文件位于网站的外观之下。我还提供了一个链接到我的网站页面的代码，我已经上传到textsnip。你可以在这里找到它 - http://textsnip.com/f434fd。我还添加了注释来标记标题，侧边栏和内容部分。任何帮助将不胜感激。提前致谢！

Answer 1

我建议您使用％值代替 px 。
例如：

• 标题：100％;
• 导航：20％;
• 内容：80％;
• 页脚：100％;

这样，如果有人对窗口进行了调整，它将始终显示完美。

Answer 2

最简单的解决方案是在容器上使用min-wdith：

<div style="width: 90%; padding: 10px; margin:0 auto; min-width: 400px;"> 

这不适用于IE6，但可以用于其他所有内容。并且，如果您需要IE6，那么有几种解决方法可以解决它。

Answer 3

在内容DIV上使用“float：right”。并用％替换px宽度。 Check out this

Answer 4

您可以使用CSS媒体查询来调整越来越小的内容。例如，如果你用一个带有包装ID的div包装整个页面（并使用Simon Arnold的解决方案来表示各个元素的宽度），那么你可以这样做：

@media (min-width:1200px) {
   #wrapper {
     width:1100px;
   }
}
@media (max-width:1200px) {
   #wrapper {
      width:90%;
   }
}

如果屏幕尺寸小于1200像素，则将包装设置为90％;如果屏幕大于1200像素，则设置为1100像素。因此，如果浏览器宽度超过1200px，那么您的页面将保持相同的大小，如果它更小，那么它将很好地流动。

@media (max-width:700px) {
   #wrapper {
      width:100%;
    }
}

当浏览器变小时，它会变宽，

@media (max-width:400px) {
   #wrapper {
     width:400px;
   }
}

当浏览器变得非常小时，将其设置为固定宽度。这些都是非常简单的查询，如果您有兴趣了解有关媒体查询的更多信息，那么这里是一个好地方：http://css-tricks.com/6731-css-media-queries/ 当然，使用CSS3 Transitions使页面在这些转换之间流动也没有什么坏处。

不幸的是，IE8及以下版本不支持媒体查询。但是你可以用PHP阅读他们的浏览器类型，并指导他们获得一个体面的浏览器......这有助于改善网络。 ;）