2

因此，我试图设置一个带有背景图像的容器，当容器 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;
}

这是现在的网站

4

2 回答 2

2

这需要一个clearfix！容器元素只知道与未浮动的子元素一样高。将此添加到您的 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">

于 2012-09-13T20:21:49.233 回答
-1

这不是 CSS 问题。

只需放置一个

<br clear="all" />

在你之后

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

每当您使用浮动时，您都必须使用清除

于 2012-09-13T20:17:48.653 回答