如何根据浏览器大小动态显示产品数量? [英] How to dynamically show number of products in a row according to browser size?

问题描述

在一个电子商务网站中，我想根据浏览器的宽度连续显示项目数，但是最少要显示4个项目.就像在Amozon网站上所做的一样，如果您尝试浏览amozon.com，尝试最大化和缩小您的浏览器，您会发现[更多要考虑的项目]部分中显示的项目数与您的浏览器大小有关.知道何时应该完全隐藏或显示一个项目，而永远不会部分隐藏该项目，足够聪明.

In an ecommerce site, I would like to display number of items in a row according to browser width, but minimum will be 4 items. Just like what has been done in Amozon site, if you try to browse amozon.com, try to maximize and shrink your browser, you will find that number of items display in [More Items to Consider] section is according to your browser size. It is smart enough to know when it should fully hide or show an item, no partially visible item forever.

任何人都知道这项技术叫什么?知道如何做到这一点吗?预先感谢.

Anyone know what is this technology called? Any idea how this can be done? Thanks in advance.

推荐答案

您可以使用overflow:hidden在div中的float元素进行此操作.我将为您提供概念验证.

You can do this with float elements in a div with overflow:hidden. I'll jsfiddle a proof of concept for you.

JSFiddle: http://jsfiddle.net/WLEzw/

JSFiddle: http://jsfiddle.net/WLEzw/

放大和缩小浏览器窗口，您会看到越来越少的梨.

Make your browser window bigger and smaller and you will see more and less pears.

这篇关于如何根据浏览器大小动态显示产品数量?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！