仅根据浏览器宽度显示有限的 div

Question

我有一个 php 脚本，它创建了一堆包含图像和一些文本的 div。 div 是浮动的，所以它们都是从左到右读取的。我的问题是，当调整浏览器的大小或在较小的屏幕尺寸上查看时，div 会在彼此下方浮动，这是您期望 css 做的，但不是我想要的。如果屏幕上只有 4 个 div，那么它应该只显示 4 个 div。 If 7 then 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 应该用于显示/布局。