1

全部。我有这个问题，我明确规定了某个 div 应该有多宽，但它忽略了它。我有一个包装器，我想要并排放置一个侧边栏和一个内容栏。内容栏似乎正在推开侧边栏并填满所有空间。

有问题的代码：

#wrapper{
    font-family: "Georgia", serif;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -2em;
    width: 700px;
    position: relative;
}

#content{
    float: left;
    width: 400px;
    padding-left: 25px;
    padding-right: 50px;
}

#sidebar {
    float: right;
    width: 175px;
    padding-right: 25px;
}

简而言之，HTML 就是 Blah Blah Blah

我将 Lorem Ipsum 放在内容所在的位置，并将一些 Lorem Ipsum 放在侧边栏中。chrome 中的元素检查器显示内容为 700 像素宽，即使我声明它为 400 像素。我真的不在乎ie6的兼容性。

http://imgur.com/A1w0a应该是这样的。

有人说一些关于小提琴的事情。我这样做对吗 http://jsfiddle.net/R3Wyw/1/ 大 Lorem Ipsum 块更瘦，只有 400 像素的文本，而侧边栏应该向上移动并插入它旁边。

4

1 回答 1

0

You've basic HTML and CSS syntax problems in your code:

  • HTML ending tags should be written </div> and never ever </div id="content">.

Good:

    <div id="content" class="something" role="main">
      <p>Content</p>
    </div>

Bad:

    <div id="content" class="something" role="main">
      <p>Content</p>
    </div id="content" class="something" role="main">
  • CSS comments must be written /* a CSS comment */, not <-- HTML comment -->

You should try to validate your code in http://validator.w3.org (HTML) and http://jigsaw.w3.org/css-validator/ (CS) before posting (use the Web Developer Toolbar extension on Firefox to do it fast).
Error messages are sometimes a bit cryptic but they're always the same ;) Google for them to get explanations or ask here on SO.

For width problems, I add different background-color to elements and parents, to better see which one isn't as expected (and which one has only floating children and thus no real content in the flow anymore thus no height thus no visible background color...). Like lightblue, lightgreen, pink, lightyellow, etc This and MeasureIt! extension on Fx.

于 2012-08-11T09:22:29.573 回答