Question

如上所述，我正在尝试使用人造柱方法来匹配高度列。我遵循CSS中列出的方法：The Missing Manual，它与我在ALA和其他在线资源上看到的所有内容相匹配。我遇到的问题是人造柱图像永远不会出现在屏幕上。这是我正在使用的HTML：

<div id="contentWrapper">
  <div id="reports">   
    <h2>yyyy</h2>  
    <p>xxxxx</p>                               
  </div>

  <div id="webApps">
    <h2>yyyy</h2>
    <p>xxxxx</p>
  </div>

  <div id="resources">
    <h2>yyyy</h2>
    <p>xxxx</p>
  </div>

  <div id="footer">
    <hr style="text-decoration:dotted" />
    <p> xxxx </p>
  </div>
</div>

CSS：

#contentWrapper {   
  background: url(fauxcolumn.png) repeat-y left top;
}
#reports {
  width: 300px;
  float: left;
  font-size: 11px;
}
#webApps {
  width: 150px;
  float:left;
  margin: 21px 100px 0px 80px;
}
#resources {
  width: 210px;
  float: left;
  text-align:left;
  margin-top: 21px;
}
#footer {
  clear:both;
  text-align: center;
  font-size: smaller;
  color: darkgray;
}

Answer 1

从评论中拉出：你确定你有正确的图像链接吗？确保fauxcolumn.png与您的页面/样式表位于同一目录级别。

CSS Faux Column布局出现问题 - 背景列图像未显示

1 个答案: