Question

所有。我有这个问题，我已明确规定某个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很简单等等等等等等简而言之

我把Lorem Ipsum放在内容中，我在边栏中放了一些Lorem Ipsum。 Chrome中的Element Inspector显示内容为700像素宽，即使我声明它是400px。我真的不关心ie6兼容性。

http://imgur.com/A1w0a它应该是什么样子。

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

Answer 1

您的代码中存在基本的HTML和CSS语法问题：

HTML结尾标记应写为</div>，永远不会</div id="content">。

好：

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

为：

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

CSS评论必须写为/* a CSS comment */，而不是<-- HTML comment -->

在发布之前，您应该尝试在http://validator.w3.org（HTML）和http://jigsaw.w3.org/css-validator/（CS）中验证您的代码（使用Firefox上的Web Developer Toolbar扩展程序快速完成）。
错误信息有时候有点神秘，但它们总是一样;）谷歌让他们得到解释或在这里询问。

对于宽度问题，我为元素和父母添加了不同的背景颜色，以便更好地看到哪一个不符合预期（哪一个只有浮动子元素，因此流程中没有实际内容，因此没有高度因此没有可见的背景颜色......）。像浅蓝色，浅绿色，粉红色，淡黄色等，这和MeasureIt！ Fx扩展。

Div忽略设置宽度约束，CSS

1 个答案: