0

这是我正在尝试做的新事情，左侧固定位置的浮动侧边栏，右侧是主要内容。由于某种原因，我的很多 CSS 都不起作用。尤其是主要是完整的 750 像素，而不是像我说的那样只有 600。如果您想查看结果，我已经在我的网站上突出显示了不同的部分（http://brandonc.handcraft.com/sevenmages/prolouge）：

  <style>
    html { margin: 0; padding: 0; }
    body { background-image: url('old-paper-texture.jpg'); margin: 0; padding: 0; }
    #wrap { width: 750px; margin: auto; }
    #header { background: purple; }
    #header h1 { text-align: center; }
    #header h2 { text-align: center; }
    #header h3 { text-align: center; }
    #main { float: right; width: 600; background: blue;}
    #main p { font-family: arial; font-size: 3;  margin: 20 30; text-align: left; text-indent: 30px; }
    #main h1 { font-family: Macondo Swash Caps; text-align: center; }
    #main h2 { font-family: Macondo Swash Caps; text-align: center; }
    #main h3 { text-align: center; }
    #sidebar { position: fixed; margin: 0; padding: 0; text-indent: 0; background: red; float: left; width: 150; }
    #sidebar p { text-align: center; text-indent: 0; }
    #sidebar il { text-align: center; }
    #sidebar ul {  }
    #sidebar a:link { color: #000000; text-decoration: none; font-family: Macondo Swash Caps; font-size: 15; }
    #sidebar a:visited { color: #000000; text-decoration: none; font-family: Macondo Swash Caps; font-size: 15; }
    #sidebar a:hover { color: #000000; text-decoration: none; font-family: Macondo Swash Caps; font-size: 15; }
    #sidebar a:active { color: #000000; text-decoration: none; font-family: Macondo Swash Caps; font-size: 15; }
    #footer { margin: 20 0; text-align: center; background: green; }
  </style>

注意：wrap 是所有 div 的，基本上就像一个 body 函数。

4

2 回答 2

2

您没有为您的#maindiv 宽度指定一个单位，这是无效的 CSS - 浏览器会忽略您当前设置的宽度属性 .. 只需包含pxafter600并且应该可以按预期工作..

还为设置的宽度添加一个px值#sidebar

而不是width: 150;让它width: 150px;

于 2013-03-09T04:16:13.767 回答
1

您需要包括单位，这里是“px”。所以将“600”更改为“600px”。这应该带你朝着正确的方向前进。

于 2013-03-09T04:16:44.653 回答