Question

我正在尝试创建以下内容。

alt text http://www.freeimagehosting.net/uploads/a972d988f8.jpg

问题是第1行中的内容具有与第2行中的内容不同的渐变背景。

此外，row1动态填充数据库中的内容，因此它可以有2个项目或6个。

所以我希望row2中的渐变不断重复它以匹配其兄弟的宽度。我不能在容器上设置渐变，因为每个都有不同的背景图像渐变。

问题在于IE8和7，因为它们只重复第2行的宽度，所以如果第1行更短或更宽，则会有一个空白间隙。

 <div id="content">
     <ul class="product-list">
         <li class="product-thumb"> 
             <a href="#" class="product-image"><img src="" /></a>
                 <h3> <a href=""> prod1</a></h3>
          </li>
          <li class="product-thumb"> 
              <a href="#" class="product-image"><img src="" /></a>
              <h3> <a href=""> prod2</a></h3>
          </li>
      </ul>
      <ul class="footer-menu">
          <div class="footer-container">
              <li><a href="#">Link1</a> </li>
              <li><a href="#" >link2</a></li>
              <li>info</li>
              <div class="footer-middle-background"></div>                 
          </div>
      </ul>
 </div>

Answer 1

您无法在div中使用ul。

如果您将div移出ul，它将自动100％宽（除非您在其他地方指定了其他内容......）。

  <div class="footer-container">
    <div class="footer-middle-background">
      <ul class="footer-menu">
          <li><a href="#">Link1</a> </li>
          <li><a href="#" >link2</a></li>
          <li>info</li>
      </ul>
    </div> 
  </div>

动态宽度除以渐变背景 - IE8＆amp; IE7

1 个答案: