只根據瀏覽器寬度顯示限制的div

Question

我有一個php scrpit，它創建了一堆包含圖像和文本的div。 div的浮動，所以他們都從左到右閱讀。我的問題是，當瀏覽器被調整大小或在較小的屏幕尺寸上查看時，div的位置會彼此浮動，您希望CSS做什麼，但不是我想要的。如果屏幕上只顯示4個div，那麼它應該只顯示4個div。如果7，然後7這是目前正在做

它，這是應該如何看待

什麼我的代碼看起來像

<div id="mainContent2"> 


            <div id="newReleaseDiv"><center><input type="image" img src="Images/Database Images//GALLO/7599385542.jpg" height="150px" /></center> 
       <span>Live -Frat Party At</span><br /> 
       <span> 
       Linkin Park</span><br /> 
       <span>R 200.00</span> 
       </div> 
             <div id="newReleaseDiv"><center><input type="image" img src="Images/Database Images//GALLO/7599399935.jpg" height="150px" /></center> 
       <span>Road To Revolution:</span><br /> 
       <span> 
       Linkin Park</span><br /> 
       <span>R 250.00</span> 
       </div> 
             <div id="newReleaseDiv"><center><input type="image" img src="Images/Database Images//GALLO/9362424712.jpg" height="150px" /></center> 
       <span>2 Points Of Authority</span><br /> 
       <span> 
       Linkin Park</span><br /> 
       <span>R 100.00</span> 
       </div> 
             <div id="newReleaseDiv"><center><input type="image" img src="Images/Database Images//GALLO/9362426132.jpg" height="150px" /></center> 
       <span>Somewhere I Belong</span><br /> 
       <span> 
       Linkin Park</span><br /> 
       <span>R 100.00</span> 
       </div> 
             <div id="newReleaseDiv"><center><input type="image" img src="Images/Database Images//GALLO/9362426302.jpg" height="150px" /></center> 
       <span>Faint (Single)</span><br /> 
       <span> 
       Linkin Park</span><br /> 
       <span>R 100.00</span> 
       </div> 
             <div id="newReleaseDiv"><center><input type="image" img src="Images/Database Images//GALLO/9362483262.jpg" height="150px" /></center> 
       <span>Reanimation (Remix</span><br /> 
       <span> 
       Linkin Park</span><br /> 
       <span>R 150.00</span> 
       </div> 
             <div id="newReleaseDiv"><center><input type="image" img src="Images/Database Images//GALLO/9362484622.jpg" height="150px" /></center> 
       <span>Meteora (Import)</span><br /> 
       <span> 
       Linkin Park</span><br /> 
       <span>R 150.00</span> 
       </div> 
             <div id="newReleaseDiv"><center><input type="image" img src="Images/Database Images//GALLO/WBCD 1987.jpg" height="150px" /></center> 
       <span>Hybrid Theory</span><br /> 
       <span> 
       Linkin Park</span><br /> 
       <span>R 100.00</span> 
       </div> 
             <div id="newReleaseDiv"><center><input type="image" img src="Images/Database Images//GALLO/WBCD 2024.jpg" height="150px" /></center> 
       <span>Reanimation (Remix Album)</span><br /> 
       <span> 
       Linkin Park</span><br /> 
       <span>R 100.00</span> 
       </div> 
             <div id="newReleaseDiv"><center><input type="image" img src="Images/Database Images//GALLO/WBCD 2061.jpg" height="150px" /></center> 
       <span>Live In Texas</span><br /> 
       <span> 
       Linkin Park</span><br /> 
       <span>R 100.00</span> 
       </div> 

</div> 

將有多個div在這樣的頁面上，那麼這裏最好的解決方案是什麼，如果瀏覽器調整大小，它將隱藏或顯示更多的div，而不會重新加載頁面，這是跨瀏覽器兼容的

我用這個腳本在ff，chrome，opera中工作，但不是IE。它會正確加載頁面，但是當您調整瀏覽器大小時，它不會隱藏或顯示更多的div。你將不得不重新加載頁面再次

<script type="text/javascript"> 
      function newReleaseDisplay() { 
       if (width > 1000) { 
     var divsToDisplay = Math.floor(width/175); 
     $("#mainContent2 > div").slice(1).show(); 
     $("#mainContent2 > div").slice(divsToDisplay).hide(); 
     } 
     else { 
      var divsToDisplay = Math.floor(1000/175); 
      $("#mainContent2 > div").slice(1).show(); 
      $("#mainContent2 > div").slice(divsToDisplay).hide(); 

     } 
     } 
    var width = $(window).width(); 
    window.onload = newReleaseDisplay(); 

$(window).resize(function(){ 
    if($(this).width() != width){ 
     width = $(this).width(); 
     console.log(width); 
     newReleaseDisplay(); 
    } 
}); 
</script> 

Answer 1

靜靜地飄浮所有.newReleaseDiv左邊，並設置#mainContent2有一個行的高度和固定高度overflow: hidden;

JavaScript是不是真的有必要在這裏。相反，CSS應該用於顯示/佈局。