html - div定位不正确

Question

作为一项练习，我决定深入研究 CSS 布局样式，但我已经看不出为什么我的布局没有正确对齐。还有为什么容器 div 仅在其中有一些文本时才出现。我认为它会根据 css 语句中的背景属性显示和增长。我已经完成了 screengrab 来显示问题。有人可以显示我的错误。谢谢

屏幕抓取:http://imageshack.us/photo/my-images/21/containergrabnew.png/

CSS

#container  {

  width: 800px;
    margin: 0 auto;
  background-image: url(../images/container-bg.gif);
    background-position: center center;
  background-repeat: repeat-y;
}
#containerLeft {

  width: 475px;

    float:left;
  background-image: url(../images/container-left-bg.gif);
    background-position: center center;
  background-repeat: repeat-y;
}
#containerRight {

  width: 300px;

    float:right;
  background-image: url(../images/container-right-bg.gif);
    background-position: center center;
  background-repeat: repeat-y;
}

html

<div id="container">
    This is the container
    <div id="containerLeft">
      This is the left container

    <div id="containerRight">
      This is the right container
    </div></div>
  </div>

Answer 1

am already failing to see why my layout is not aligning correctly

您的 HTML 嵌套不正确。将其更改为:

<div id="container">
    <div id="containerLeft">
      This is the left container
    </div>

    <div id="containerRight">
      This is the right container
    </div>
</div>

also why is the container div only appearing when there some text in there. i thought it would display and grow based on the background property in css statement.

您需要清除 float 元素。

您可以通过将 overflow: hidden 添加到 #container 来做到这一点。

您应该阅读这篇文章以获取更多信息:http://css-tricks.com/all-about-floats/

它讨论了为什么会发生这种情况，各种修复方法，并包含有关 float 的有用和相关的一般信息。