使用 CSS 和 Divs 制作两列布局答案

【问题标题】：Using CSS and Divs to make a two-column layout使用 CSS 和 Divs 制作两列布局
【发布时间】：2011-09-15 07:32:29
【问题描述】：

我对 css 定位还比较陌生，但是读了几本书，看了几篇教程。我在 colourLovers 制作了一些调色板，并想看看它们作为配色方案应用于网站时的外观。因此，利用我所拥有的少量编码知识，我创建了一个页面来展示我的配色方案。过了一段时间，它变成了一种自信的提升，当一件小事引起我的注意时，我已经完成了它。

我有一个两列布局 - 左侧是导航菜单，上方是标题，右侧是内容部分，所有内容都在自己的 div 中。我的问题是 - 当我缩放页面时（例如，使查看它的窗口更小），内容部分被推送，因此它包裹在 Div 下。我可以解决此问题的方法是制作一个没有 bg 颜色的附加 div，并使其与包含导航 div 的内容一样长，因此它们会对齐，但如果您调整窗口大小，它不会修复它。

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

【问题讨论】：

就我个人而言，我倾向于使用 div 进行布局，每个 div 中都有一个子 div。父 div（定义布局）是绝对定位的——因此宽度和高度以像素为单位定义。子 div 也是绝对定位的，但具有填充、边距、边框和内容。这意味着填充、边距和边框不会拉伸父 div，因此它们将准确显示您想要的方式，并且当视口变小时不应下降到下一行。另一种方法是使用 jQuery 检测调整大小（使用$(window).resize(function() {});），然后根据需要调整所有内容。
如果这是您正在寻找的内容，那么我会将其发布为答案，以便您将其标记为已解决。
嗯，好吧。我目前为导航定义了以像素为单位的 div 宽度，但其他内容和标题 div 具有基于百分比的宽度。标题也有固定的高度，但内容 div 没有。我不介意文本是否缩放到内容部分中的新行，我只是不希望这些新行包含在我的导航菜单下方。我的第一个想法是将导航的父 div 扩展到页面底部，但这也会为整个页面添加一个滚动条，即使没有剩余内容。有什么方法可以防止内容被 div 包裹起来？
你实际上并没有问问题。你做了一堆陈述，即使有一次你说“我的问题是这个”，然后继续不问问题。您还可以使用 jsfiddle.net 来发布您的 HTML、CSS、Javascript 问题，以便人们可以摆弄它。
@TMB - nav 是 Html5，如果你不写 Html5，你不应该使用 nav。

标签： css layout html

【解决方案1】：

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

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

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

【讨论】：

你能回答stackoverflow.com/questions/10141148/…吗？

【解决方案2】：

我建议您使用 % 值而不是 px。
例如：

标题：100%；
净值：20%；
含量：80%；
页脚：100%；

这样，如果有人调整窗口，它总是显示完美。

【讨论】：

我最初将导航设置为 20% 宽度，但是当我缩放窗口时它变得有点太大了，所以我将其设置回 200px。导航 div 的宽度设置为 100%，但内容 div 包裹在它下面，所以我在导航 div 上放置了 300px 的底部边距样式，这有点作用，但是当窗口缩小时，推送内容 div仍然在下面，只有 300px 的空间。调整大小不是我关注的重点，而是我想在左侧创建一个列，其他 div 中没有任何内容可以换行。
这个问题对你有帮助stackoverflow.com/questions/7380610/…

【解决方案3】：

在内容 DIV 上使用“float:right”。并将 px 宽度替换为 %。 Check out this

【讨论】：

嗯，我试过了，但它只是扩展了导航 div 以填充整个页面的宽度，并将所有内容 div 推到它下面。不过，感谢您的快速回答。

【解决方案4】：

您可以使用 CSS 媒体查询来调整事物，因为它们变得越来越大。例如，如果您使用 ID 为 wrapper 的 div 包装整个页面（并使用 Simon Arnold 的解决方案来确定各个元素的宽度），那么您可以这样做：

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

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

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

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

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

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

很遗憾，IE8 及以下版本不支持媒体查询。但是您可以改为使用 PHP 读取他们的浏览器类型，并指导他们获得一个像样的浏览器……这将有助于使网络变得更好。 ;)

【讨论】：