Question

必须有一些非常简单的东西，我搞砸了，但我不知道它是什么。两列显示正确分开，图像位于正确的位置（我已将图像拖放到VS2012中的CSS代码中以验证路径是否正确。）背景图像应显示左列是否为棕褐色和主要内容列为白色。相反，整个页面的背景是白色的。

这是HTML：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <link href="TwoColumnStyle.css" rel="stylesheet" />
  <title>Two-column layout</title>
</head>
<body>
  <div id="wrapper">
    <div id="leftColumn">
        <ul>
            <li>First</li>
            <li>Second</li>
            <li>Third</li>
        </ul>
    </div>
    <div id="mainContent">
        <h1>This is the header</h1>

        <h2>Content1</h2>
        <p>This is the first paragraph. La de daa.</p>
        <p>This is the second paragraph. Doo be doo.</p>

        <h2>Content2</h2>
        <p>This is the third paragraph. Bow chik a wow wow.</p>
    </div>
  </div>    
</body>
</html>

这是CSS：

body {
  width: 960px;
  margin-left: auto;
  margin-right: auto;
}

#wrapper { background-image: url(images/col_bg.png);
       background-repeat: repeat-y;
       background-position: left top; }

#leftColumn {
  width: 100px;
  float: left;
}

#mainContent {
  width: 860px;
  float: right;
}

这是图像的绝对路径，但显然上面的CSS是相对路径：

http://localhost:10525/layouts1/images/col_bg.png

图像为960像素×1像素。

我在这里做错了什么线索？我正在尝试使用DIV对基本布局进行一些实验，根据我在网上看到的信息，这正是应该如何编写的（通过CSS Missing Manual第2版和在线资源。）

Answer 1

您可以尝试将体选择器中的所有样式规则移动到#wrapper选择器，然后向#leftColumn添加透明背景（如果希望#wrapper中的图像显示），并添加背景白色到你的#mainContent。

您还可以将背景颜色或图像添加到您的身体选择器。您无法控制浏览器大小，当您向#wrapper添加宽度并且浏览器全屏打开时，#wrapper将仅占用屏幕的一部分，其余部分将来自正文。

最后一点，浮动的精确宽度并不总能在所有浏览器上产生预期的结果。特别是如果它们在约束容器内。

[编辑] 你必须给你的#wrapper一个最小高度才能在屏幕上看到它。

[编辑] 我确实发现#wrapper需要一个最小高度才能显示出来。所以我删除了min-height，并在#wrapper中使用表单标签和输入进行了测试，但是在其他两个div之下，背景一直显示在表单标签的底部。似乎这两个div根本不影响#wrapper div。

Answer 2

我发现了这个问题。我不确定为什么我在寻找这种方法的引用没有明确说明这一点，但是overflow：hidden必须添加到包装器中以使其自动调整为内部div。

一旦我像这样编辑了CSS，问题就解决了：

#wrapper { 
  background-image: url(images/col_bg.png);
  background-repeat: repeat-y;
  background-position: left top;
  overflow:hidden;
}

用faux-column方法无法获得背景图像

2 个答案: