Question

作为一个练习我决定深入研究css布局样式，并且我已经无法理解为什么我的布局没有正确对齐。还有为什么容器div只出现在那里有一些文本。我认为它会根据css语句中的background属性显示和增长。我已经做了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

我已经不明白为什么我的了布局未正确对齐

您的HTML未正确嵌套。将其更改为：

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

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

为什么只有容器div 当有一些文字出现时出现那里。我以为它会显示和根据背景属性增长在css声明中。

您需要清除浮动的元素。

您可以将overflow: hidden添加到#container。

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

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

div定位不正确

1 个答案: