Question

我有一个php scrpit，它创建了一堆包含图像和一些文本的div。 div是浮动的，所以他们都是从左到右阅读。我的问题是，当浏览器调整大小或在较小的屏幕尺寸上查看时，div会浮动在彼此之下，你期望css做什么而不是我想要的。如果屏幕上只有4个div，那么它应该只显示4个div。如果是7然后是7.这就是它目前正在进行的 enter image description here

这就是它的外观

enter image description here

我的代码是什么样的

<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应该用于显示/布局。

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

1 个答案: