1

一定有一些非常简单的东西我搞砸了，但我不知道它是什么。两列正确分开并且图像位于正确的位置（我已将图像拖放到 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 像素 x 1 像素。

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

4

2 回答 2

1

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

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

#wrapper { 
  background-image: url(images/col_bg.png);
  background-repeat: repeat-y;
  background-position: left top;
  overflow:hidden;
}
于 2013-07-06T18:03:22.087 回答
1

您可以尝试将正文选择器中的所有样式规则移动到#wrapper 选择器，然后将背景透明添加到#leftColumn（如果您希望#wrapper 中的图像显示出来），并将背景白色添加到您的#主要内容。

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

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

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

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

于 2013-07-06T16:38:18.247 回答