將無序列表擴展爲瀏覽器寬度（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）

回答

相關問題