Question

所以我正在尝试设置一个带有背景图像的容器，当容器div中的其他div元素足够长时，该容器会重复。当所包含的div很短时，它希望不会重复。

然而，我无法重复图像 - 我认为对我编码#container的方式有些不确定。

这是我刚才的HTML ...

<body>
  <div id=container>
    <div id=textblock>
      <div id=maintext>
        <p>text here</p>
      </div>
    </div>
  </div>
</body>

这是CSS ...

body {
    background-color: #888;
    background-position: top;
    height:100%;
    margin:0;
    padding:0;
}

#container {
    background-position: relative;
    width: 960px;
    min-height: 720px;
    margin-left: auto;
    margin-right: auto;
    font-family: Antelope H;
    font-size: 1.5em;
    color: #c60;
    background:url(images/containerback-01.png) repeat-y;
    background-color: #fc6;
}

Here's the site就像现在一样

Answer 1

这需要一个clearfix！容器元素只知道与未浮动的子元素一样高。将this添加到您的css文件中：

.clearfix:before,
.clearfix:after {
    content: ".";    
    display: block;    
    height: 0;    
    overflow: hidden;   
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;} /* IE < 8 */

并将您的容器div更改为使用<div id="container" class="clearfix">

打开

Answer 2

这不是css问题。

只需放置一个

<br clear="all" />

之后

<div id="mainText"></div>

每当你使用浮动时，你必须使用清晰的

CSS背景图像y在容器中重复

2 个答案: