我有一个 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>