Question

这是我正在努力做的新事物，一个左侧固定位置的浮动侧栏，右侧是主要的东西。由于某种原因，我的很多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函数。

Answer 1

您没有为#main div宽度指定单位，这是无效的CSS - 浏览器会忽略您当前设置的宽度属性..只需在px之后加入600这应该按预期工作..

还为px

上设置的宽度添加#sidebar值

而不是width: 150;使其成为width: 150px;

Answer 2

你需要包含单位，这里是'px'。所以将'600'改为'600px'。这应该会让你朝着正确的方向前进。

我的浮动侧边栏CSS出了什么问题？

2 个答案: