将无序列表扩展为浏览器宽度（html/css）

我想要做的是有一个显示产品的ul列表。宽度是窗口的100％。因此，浏览器窗口越宽，用户将看到的每行产品就越多。随着浏览器越来越小，每行产品越少。我遇到的问题是，如果窗口边缘之间的空间稍微小于产品的容器，我在浏览器右侧会得到这个空白区域，我想要的是将该行均匀地分配到边缘如果它不适合该行的其他产品。将无序列表扩展为浏览器宽度（html/css）

这里是我的代码：

<!DOCTYPE HTML> 


<html> 
<head> 
    <meta charset="UTF-8" /> 
</head> 

<body> 
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script> 
<script> 
$(window).resize(function() { 
    var windowWidth = $('#prodGrid').width(); 
    var prodGridWidth = $('#prodGrid li').width(); 
    var numOfUnits = windowWidth/prodGridWidth; 
    var remainder = windowWidth%prodGridWidth; 
    var widthWithRemainder = prodGridWidth+remainder + "px"; 
    if(numOfUnits > 5 && numOfUnits < 7) 
    { 
     $('#prodGrid li').css('min-width',widthWithRemainder); 
    } 
}); 
</script> 
<style type="text/css"> 
#prodGrid { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    display: inline; 
} 

#prodGrid li { 
    float: left; 
    margin: 0; 
    padding: 0; 
    min-width: 165px; 

} 

.prodGridWidth { 
    width: 10%; 
} 

.searchImageContainer { 
    height: 350px; 
    width: 140px; 
} 

.right { 
    width: 100%; 
} 
</style> 




    <table id="searchContainerTable"> 
     <tr> 
      <td class="right"> 
       <ul id="prodGrid"> 


    <li class="prodGridWidth"> 
    <div class="searchImageContainer"> 
     <div id="loadarea" class="image"> 

      <img src="http://t3.gstatic.com/images?q=tbn:ANd9GcRm4NX4YZe6OUhOB-0xT0rOOJ-iiYf3fO1x1dW0FW4dXlu5UPQO" border="0" alt="Item" width="115" height="174" /> 
     </div> 
     <div class="swatch"> 
     </div> 
     <div class="productName"><a class="productName" href="">Item</a></div> 
     <span class="price">Price: </span><span class="priceRange">$369 - $659</span> 
     <div class="ratings"><div class="rating">Rating: </div><div class="starRating35"></div></div> 

     <div id="clear"></div> 
    </div> 
    </li> 



    <li class="prodGridWidth"> 
    <div class="searchImageContainer"> 
     <div id="loadarea" class="image"> 

      <img src="http://t3.gstatic.com/images?q=tbn:ANd9GcRm4NX4YZe6OUhOB-0xT0rOOJ-iiYf3fO1x1dW0FW4dXlu5UPQO" border="0" alt="Item" width="115" height="174" /> 
     </div> 
     <div class="swatch"> 
     </div> 
     <div class="productName"><a class="productName" href="">Item</a></div> 
     <span class="price">Price: </span><span class="priceRange">$369 - $659</span> 
     <div class="ratings"><div class="rating">Rating: </div><div class="starRating35"></div></div> 

     <div id="clear"></div> 
    </div> 
    </li> 



    <li class="prodGridWidth"> 
    <div class="searchImageContainer"> 
     <div id="loadarea" class="image"> 

      <img src="http://t3.gstatic.com/images?q=tbn:ANd9GcRm4NX4YZe6OUhOB-0xT0rOOJ-iiYf3fO1x1dW0FW4dXlu5UPQO" border="0" alt="Item" width="115" height="174" /> 
     </div> 
     <div class="swatch"> 
     </div> 
     <div class="productName"><a class="productName" href="">Item</a></div> 
     <span class="price">Price: </span><span class="priceRange">$369 - $659</span> 
     <div class="ratings"><div class="rating">Rating: </div><div class="starRating35"></div></div> 

     <div id="clear"></div> 
    </div> 
    </li> 



    <li class="prodGridWidth"> 
    <div class="searchImageContainer"> 
     <div id="loadarea" class="image"> 

      <img src="http://t3.gstatic.com/images?q=tbn:ANd9GcRm4NX4YZe6OUhOB-0xT0rOOJ-iiYf3fO1x1dW0FW4dXlu5UPQO" border="0" alt="Item" width="115" height="174" /> 
     </div> 
     <div class="swatch"> 
     </div> 
     <div class="productName"><a class="productName" href="">Item</a></div> 
     <span class="price">Price: </span><span class="priceRange">$369 - $659</span> 
     <div class="ratings"><div class="rating">Rating: </div><div class="starRating35"></div></div> 

     <div id="clear"></div> 
    </div> 
    </li> 



    <li class="prodGridWidth"> 
    <div class="searchImageContainer"> 
     <div id="loadarea" class="image"> 

      <img src="http://t3.gstatic.com/images?q=tbn:ANd9GcRm4NX4YZe6OUhOB-0xT0rOOJ-iiYf3fO1x1dW0FW4dXlu5UPQO" border="0" alt="Item" width="115" height="174" /> 
     </div> 
     <div class="swatch"> 
     </div> 
     <div class="productName"><a class="productName" href="">Item</a></div> 
     <span class="price">Price: </span><span class="priceRange">$369 - $659</span> 
     <div class="ratings"><div class="rating">Rating: </div><div class="starRating35"></div></div> 

     <div id="clear"></div> 
    </div> 
    </li> 



    <li class="prodGridWidth"> 
    <div class="searchImageContainer"> 
     <div id="loadarea" class="image"> 

      <img src="http://t3.gstatic.com/images?q=tbn:ANd9GcRm4NX4YZe6OUhOB-0xT0rOOJ-iiYf3fO1x1dW0FW4dXlu5UPQO" border="0" alt="Item" width="115" height="174" /> 
     </div> 
     <div class="swatch"> 
     </div> 
     <div class="productName"><a class="productName" href="">Item</a></div> 
     <span class="price">Price: </span><span class="priceRange">$369 - $659</span> 
     <div class="ratings"><div class="rating">Rating: </div><div class="starRating35"></div></div> 

     <div id="clear"></div> 
    </div> 
    </li> 



    <li class="prodGridWidth"> 
    <div class="searchImageContainer"> 
     <div id="loadarea" class="image"> 

      <img src="http://t3.gstatic.com/images?q=tbn:ANd9GcRm4NX4YZe6OUhOB-0xT0rOOJ-iiYf3fO1x1dW0FW4dXlu5UPQO" border="0" alt="Item" width="115" height="174" /> 
     </div> 
     <div class="swatch"> 
     </div> 
     <div class="productName"><a class="productName" href="">Item</a></div> 
     <span class="price">Price: </span><span class="priceRange">$369 - $659</span> 
     <div class="ratings"><div class="rating">Rating: </div><div class="starRating35"></div></div> 

     <div id="clear"></div> 
    </div> 
    </li> 



    <li class="prodGridWidth"> 
    <div class="searchImageContainer"> 
     <div id="loadarea" class="image"> 

      <img src="http://t3.gstatic.com/images?q=tbn:ANd9GcRm4NX4YZe6OUhOB-0xT0rOOJ-iiYf3fO1x1dW0FW4dXlu5UPQO" border="0" alt="Item" width="115" height="174" /> 
     </div> 
     <div class="swatch"> 
     </div> 
     <div class="productName"><a class="productName" href="">Item</a></div> 
     <span class="price">Price: </span><span class="priceRange">$369 - $659</span> 
     <div class="ratings"><div class="rating">Rating: </div><div class="starRating35"></div></div> 

     <div id="clear"></div> 
    </div> 
    </li> 



    <li class="prodGridWidth"> 
    <div class="searchImageContainer"> 
     <div id="loadarea" class="image"> 

      <img src="http://t3.gstatic.com/images?q=tbn:ANd9GcRm4NX4YZe6OUhOB-0xT0rOOJ-iiYf3fO1x1dW0FW4dXlu5UPQO" border="0" alt="Item" width="115" height="174" /> 
     </div> 
     <div class="swatch"> 
     </div> 
     <div class="productName"><a class="productName" href="">Item</a></div> 
     <span class="price">Price: </span><span class="priceRange">$369 - $659</span> 
     <div class="ratings"><div class="rating">Rating: </div><div class="starRating35"></div></div> 

     <div id="clear"></div> 
    </div> 
    </li> 



    <li class="prodGridWidth"> 
    <div class="searchImageContainer"> 
     <div id="loadarea" class="image"> 

      <img src="http://t3.gstatic.com/images?q=tbn:ANd9GcRm4NX4YZe6OUhOB-0xT0rOOJ-iiYf3fO1x1dW0FW4dXlu5UPQO" border="0" alt="Item" width="115" height="174" /> 
     </div> 
     <div class="swatch"> 
     </div> 
     <div class="productName"><a class="productName" href="">Item</a></div> 
     <span class="price">Price: </span><span class="priceRange">$369 - $659</span> 
     <div class="ratings"><div class="rating">Rating: </div><div class="starRating35"></div></div> 

     <div id="clear"></div> 
    </div> 
    </li> 



    <li class="prodGridWidth"> 
    <div class="searchImageContainer"> 
     <div id="loadarea" class="image"> 

      <img src="http://t3.gstatic.com/images?q=tbn:ANd9GcRm4NX4YZe6OUhOB-0xT0rOOJ-iiYf3fO1x1dW0FW4dXlu5UPQO" border="0" alt="Item" width="115" height="174" /> 
     </div> 
     <div class="swatch"> 
     </div> 
     <div class="productName"><a class="productName" href="">Item</a></div> 
     <span class="price">Price: </span><span class="priceRange">$369 - $659</span> 
     <div class="ratings"><div class="rating">Rating: </div><div class="starRating35"></div></div> 

     <div id="clear"></div> 
    </div> 
    </li> 

       </ul> 
      </td> 
     </tr> 
    </table> 
</body> 

</html>

为了给你什么，我试图做一个想法：http://www.overstock.com/Home-Garden/Art-Gallery/216/dept.html

你可以让你的浏览器更薄/更广泛的，看看行如何表现（我正在尝试做的），然后将它与我的代码进行比较。

来源

2011-08-22 rookie

该网站是使用JavaScript来使行以这种方式表现。你是否愿意使用JavaScript/jQuery？你需要支持哪些浏览器/版本？ – thirtydot

是的，我愿意使用JS/JQuery，该网站已经在使用最新的JQuery引擎。希望JS能够支持所有现代浏览器。我通常知道IE 7和更高版本是导致问题的原因，但我可以在没有这些功能的情况下生活。 – rookie

所以我一直在搞JQuery试图看看我能否得到它的工作，但我的头不能包装自己周围应该做什么与数学来完成这一点，不知道如果我在正确的道路上，我编辑了一些jquery/js代码 – rookie

尝试里面调整处理

var windowWidth = $('#prodGrid').width(); 
var prodGridWidth = 165 + 5; 
var numOfUnits = windowWidth/prodGridWidth; 
var width = windowWidth/Math.floor(numOfUnits) 
$('#prodGrid li').css('width', width - 5 + 'px');

有时你可以逃脱显示：inline-block的和文本对齐：证明，像

<html> 
    <head> 
     <style> 
      .products { text-align: justify; height: 54px; overflow: hidden } 
      .product { display: inline-block; width: 50px; height: 50px; border: 1px solid blue; margin: 1px } 
     </style> 
    </head> 
    <body> 
     <div class="products"> 
      <div class="product"></div> 
      <div class="product"></div> 
      <div class="product"></div> 
      <div class="product"></div> 
      <div class="product"></div> 
      <div class="product"></div> 
      <div class="product"></div> 
     </div> 
    </body> 
</html>

来源

2011-08-23 03:46:51 Leonid

的原始文章，谢谢！这两种方法都做到了，所以我只使用CSS方法。由于我没有足够的代表权，因此无法答复答案。但是谢谢你！ – rookie

将无序列表扩展为浏览器宽度（html/css）

回答

相关问题