Question

http://www.casleague.com 你可以在那里查看完整的资源

为什么图像http://casleague.com/images/content/bg.gif不重复 - 就像我编码一样？

CSS

.main { background: transparent url("../images/content/bg.gif") repeat-y;
        width: 960px; 
        font-family: Tahoma;
        color: #0c8cbd;
        text-decoration: none;
        word-spacing: normal;
        text-align: justify;
        letter-spacing: 0;
        line-height: 1.2em;
        font-size: 11px; }

     .content { padding: 20px; height:100%; }      
         .leftside { width: 600px; float: left; }
         .rightside { width: 300px; float: right; }

HTML

<div class="main">
   <div class="content">
      <div class="leftside">
         123
         12
         312
         3123
         123
         123
      </div>
      <div class="rightside">
         123
         123
         123
         123
         123
      </div>
   </div>
</div>

Answer 1

信不信由你，你的背景重复。但是，您的<div class="main">只有40像素高。这就是当您单击Firebug中的元素时的样子：

screenshot http://i53.tinypic.com/sgqotd.png

注意突出显示区域的小小。右下方DOM窗口中的clientHeight显示为“40”。

问题是默认情况下，如果内容只是浮点数，大多数容器都不会扩展到其内容的大小。我有issues with this before。将overflow: auto;添加到.main的样式块中，它应该可以正常工作。如果没有，请在<br clear="all" />的结束标记后添加<div class="rightside">。

Answer 2

在<div style="clear:both"></div>和leftside rightside之后添加div将解决问题。这些div是浮动的，是content div的唯一内容，导致其计算高度为零。 content的垂直填充总计为40px，main的高度为40px - 您的背景实际上重复40px。

Answer 3

尝试更改“。”将“＃”和“class”改为“id”。并在页面左前方放置。

#main { background: transparent url("../images/content/bg.gif") repeat-y;
        width: 960px; 
        font-family: Tahoma;
        color: #0c8cbd;
        text-decoration: none;
        word-spacing: normal;
        text-align: justify;
        letter-spacing: 0;
        line-height: 1.2em;
        font-size: 11px; }

    #content { padding: 20px; height:100%; }      
         #leftside { width: 600px; float: left; }
         #rightside { width: 300px; float: right; }

    <div id="main">
       <div id="content">
          <div id="rightside">
             123
             123
             123
             123
             123
          </div>
<div id="leftside">
             123
             12
             312
             3123
             123
             123
          </div>
       </div>
    </div>

当有文字时我的背景不重复，为什么？

3 个答案: