Javascript 将无序列表扩展到浏览器宽度（html/css）_Javascript_Jquery_Html_Css

Javascript 将无序列表扩展到浏览器宽度（html/css）

javascript jquery html css

Javascript 将无序列表扩展到浏览器宽度（html/css）,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我想做的是有一个ul列表，显示产品。宽度为窗口的100%。因此，浏览器窗口越宽，用户每行看到的产品就越多。随着浏览器越来越小，每行的产品也越来越少。我遇到的问题是，如果窗口边缘之间的空间略小于产品容器之间的空间，则浏览器右侧会出现空白，如果该行无法容纳该行上的另一个产品，则我希望该行向边缘均匀隔开以下是我的代码： <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" /> </h

我想做的是有一个ul列表，显示产品。宽度为窗口的100%。因此，浏览器窗口越宽，用户每行看到的产品就越多。随着浏览器越来越小，每行的产品也越来越少。我遇到的问题是，如果窗口边缘之间的空间略小于产品容器之间的空间，则浏览器右侧会出现空白，如果该行无法容纳该行上的另一个产品，则我希望该行向边缘均匀隔开

以下是我的代码：

<!DOCTYPE HTML>


<html>
<head>
    <meta charset="UTF-8" />
</head>

<body>
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script>
$(window).resize(function() {
    var windowWidth = $('#prodGrid').width();
    var prodGridWidth = $('#prodGrid li').width();
    var numOfUnits =  windowWidth/prodGridWidth;
    var remainder = windowWidth%prodGridWidth;
    var widthWithRemainder = prodGridWidth+remainder + "px";
    if(numOfUnits > 5 && numOfUnits < 7)
    {
        $('#prodGrid li').css('min-width',widthWithRemainder);
    }
});
</script>
<style type="text/css">
#prodGrid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline;
}

#prodGrid li {
    float: left;
    margin: 0;
    padding: 0;
    min-width: 165px;

}

.prodGridWidth {
    width: 10%;
}

.searchImageContainer {
    height: 350px;
    width: 140px;
}

.right {
    width: 100%;
}
</style>




    <table id="searchContainerTable">
        <tr>
            <td class="right">
                <ul id="prodGrid">


    <li class="prodGridWidth">
    <div class="searchImageContainer">
        <div id="loadarea" class="image">

            <img src="http://t3.gstatic.com/images?q=tbn:ANd9GcRm4NX4YZe6OUhOB-0xT0rOOJ-iiYf3fO1x1dW0FW4dXlu5UPQO" border="0" alt="Item" width="115" height="174" />
        </div>
        <div class="swatch">
        </div>
        <div class="productName"><a class="productName" href="">Item</a></div>
        <span class="price">Price: </span><span class="priceRange">$369 - $659</span>
        <div class="ratings"><div class="rating">Rating: </div><div class="starRating35"></div></div>

        <div id="clear"></div>
    </div>
    </li>



    <li class="prodGridWidth">
    <div class="searchImageContainer">
        <div id="loadarea" class="image">

            <img src="http://t3.gstatic.com/images?q=tbn:ANd9GcRm4NX4YZe6OUhOB-0xT0rOOJ-iiYf3fO1x1dW0FW4dXlu5UPQO" border="0" alt="Item" width="115" height="174" />
        </div>
        <div class="swatch">
        </div>
        <div class="productName"><a class="productName" href="">Item</a></div>
        <span class="price">Price: </span><span class="priceRange">$369 - $659</span>
        <div class="ratings"><div class="rating">Rating: </div><div class="starRating35"></div></div>

        <div id="clear"></div>
    </div>
    </li>



    <li class="prodGridWidth">
    <div class="searchImageContainer">
        <div id="loadarea" class="image">

            <img src="http://t3.gstatic.com/images?q=tbn:ANd9GcRm4NX4YZe6OUhOB-0xT0rOOJ-iiYf3fO1x1dW0FW4dXlu5UPQO" border="0" alt="Item" width="115" height="174" />
        </div>
        <div class="swatch">
        </div>
        <div class="productName"><a class="productName" href="">Item</a></div>
        <span class="price">Price: </span><span class="priceRange">$369 - $659</span>
        <div class="ratings"><div class="rating">Rating: </div><div class="starRating35"></div></div>

        <div id="clear"></div>
    </div>
    </li>



    <li class="prodGridWidth">
    <div class="searchImageContainer">
        <div id="loadarea" class="image">

            <img src="http://t3.gstatic.com/images?q=tbn:ANd9GcRm4NX4YZe6OUhOB-0xT0rOOJ-iiYf3fO1x1dW0FW4dXlu5UPQO" border="0" alt="Item" width="115" height="174" />
        </div>
        <div class="swatch">
        </div>
        <div class="productName"><a class="productName" href="">Item</a></div>
        <span class="price">Price: </span><span class="priceRange">$369 - $659</span>
        <div class="ratings"><div class="rating">Rating: </div><div class="starRating35"></div></div>

        <div id="clear"></div>
    </div>
    </li>



    <li class="prodGridWidth">
    <div class="searchImageContainer">
        <div id="loadarea" class="image">

            <img src="http://t3.gstatic.com/images?q=tbn:ANd9GcRm4NX4YZe6OUhOB-0xT0rOOJ-iiYf3fO1x1dW0FW4dXlu5UPQO" border="0" alt="Item" width="115" height="174" />
        </div>
        <div class="swatch">
        </div>
        <div class="productName"><a class="productName" href="">Item</a></div>
        <span class="price">Price: </span><span class="priceRange">$369 - $659</span>
        <div class="ratings"><div class="rating">Rating: </div><div class="starRating35"></div></div>

        <div id="clear"></div>
    </div>
    </li>



    <li class="prodGridWidth">
    <div class="searchImageContainer">
        <div id="loadarea" class="image">

            <img src="http://t3.gstatic.com/images?q=tbn:ANd9GcRm4NX4YZe6OUhOB-0xT0rOOJ-iiYf3fO1x1dW0FW4dXlu5UPQO" border="0" alt="Item" width="115" height="174" />
        </div>
        <div class="swatch">
        </div>
        <div class="productName"><a class="productName" href="">Item</a></div>
        <span class="price">Price: </span><span class="priceRange">$369 - $659</span>
        <div class="ratings"><div class="rating">Rating: </div><div class="starRating35"></div></div>

        <div id="clear"></div>
    </div>
    </li>



    <li class="prodGridWidth">
    <div class="searchImageContainer">
        <div id="loadarea" class="image">

            <img src="http://t3.gstatic.com/images?q=tbn:ANd9GcRm4NX4YZe6OUhOB-0xT0rOOJ-iiYf3fO1x1dW0FW4dXlu5UPQO" border="0" alt="Item" width="115" height="174" />
        </div>
        <div class="swatch">
        </div>
        <div class="productName"><a class="productName" href="">Item</a></div>
        <span class="price">Price: </span><span class="priceRange">$369 - $659</span>
        <div class="ratings"><div class="rating">Rating: </div><div class="starRating35"></div></div>

        <div id="clear"></div>
    </div>
    </li>



    <li class="prodGridWidth">
    <div class="searchImageContainer">
        <div id="loadarea" class="image">

            <img src="http://t3.gstatic.com/images?q=tbn:ANd9GcRm4NX4YZe6OUhOB-0xT0rOOJ-iiYf3fO1x1dW0FW4dXlu5UPQO" border="0" alt="Item" width="115" height="174" />
        </div>
        <div class="swatch">
        </div>
        <div class="productName"><a class="productName" href="">Item</a></div>
        <span class="price">Price: </span><span class="priceRange">$369 - $659</span>
        <div class="ratings"><div class="rating">Rating: </div><div class="starRating35"></div></div>

        <div id="clear"></div>
    </div>
    </li>



    <li class="prodGridWidth">
    <div class="searchImageContainer">
        <div id="loadarea" class="image">

            <img src="http://t3.gstatic.com/images?q=tbn:ANd9GcRm4NX4YZe6OUhOB-0xT0rOOJ-iiYf3fO1x1dW0FW4dXlu5UPQO" border="0" alt="Item" width="115" height="174" />
        </div>
        <div class="swatch">
        </div>
        <div class="productName"><a class="productName" href="">Item</a></div>
        <span class="price">Price: </span><span class="priceRange">$369 - $659</span>
        <div class="ratings"><div class="rating">Rating: </div><div class="starRating35"></div></div>

        <div id="clear"></div>
    </div>
    </li>



    <li class="prodGridWidth">
    <div class="searchImageContainer">
        <div id="loadarea" class="image">

            <img src="http://t3.gstatic.com/images?q=tbn:ANd9GcRm4NX4YZe6OUhOB-0xT0rOOJ-iiYf3fO1x1dW0FW4dXlu5UPQO" border="0" alt="Item" width="115" height="174" />
        </div>
        <div class="swatch">
        </div>
        <div class="productName"><a class="productName" href="">Item</a></div>
        <span class="price">Price: </span><span class="priceRange">$369 - $659</span>
        <div class="ratings"><div class="rating">Rating: </div><div class="starRating35"></div></div>

        <div id="clear"></div>
    </div>
    </li>



    <li class="prodGridWidth">
    <div class="searchImageContainer">
        <div id="loadarea" class="image">

            <img src="http://t3.gstatic.com/images?q=tbn:ANd9GcRm4NX4YZe6OUhOB-0xT0rOOJ-iiYf3fO1x1dW0FW4dXlu5UPQO" border="0" alt="Item" width="115" height="174" />
        </div>
        <div class="swatch">
        </div>
        <div class="productName"><a class="productName" href="">Item</a></div>
        <span class="price">Price: </span><span class="priceRange">$369 - $659</span>
        <div class="ratings"><div class="rating">Rating: </div><div class="starRating35"></div></div>

        <div id="clear"></div>
    </div>
    </li>

                </ul>
            </td>
        </tr>
    </table>
</body>

</html>


$（窗口）。调整大小（函数（）{
var windowWidth=$（'#prodGrid'）.width（）；
var prodGridWidth=$（'#prodGrid li'）.width（）；
var numOfUnits=windowWidth/prodGridWidth；
var余数=windowWidth%prodGridWidth；
var WidthWithRequirement=prodGridWidth+Requirement+“px”；
如果（numOfUnits>5&&numOfUnits<7）
{
$（'#prodGrid li'）.css（'min-width'，widthwithresident）；
}
});
#prodGrid{
列表样式：无；
保证金：0；
填充：0；
显示：内联；
}
#普罗德利{
浮动：左；
保证金：0；
填充：0；
最小宽度：165px；
}
.prodGridWidth{
宽度：10%；
}
.searchImageContainer{
高度：350px；
宽度：140px；
}
.对{
宽度：100%；
}


价格：369-659美元
评级：


价格：369-659美元
评级：


价格：369-659美元
评级：


价格：369-659美元
评级：


价格：369-659美元
评级：


价格：369-659美元
评级：


价格：369-659美元
评级：


价格：369-659美元
评级：


价格：369-659美元
评级：


价格：369-659美元
评级：


价格：369-659美元
评级：

让您了解我正在尝试做的事情：

您可以将浏览器变薄/变宽，查看行的行为（我正在尝试做的），然后将其与我的代码进行比较。

尝试使用内部调整大小处理程序

var windowWidth = $('#prodGrid').width();
var prodGridWidth = 165 + 5;
var numOfUnits =  windowWidth / prodGridWidth;
var width = windowWidth / Math.floor(numOfUnits)
$('#prodGrid li').css('width', width - 5 + 'px');

有时，您还可以使用display:inline块和text align:justify，比如

<html>
    <head>
        <style>
            .products { text-align: justify; height: 54px; overflow: hidden }
            .product { display: inline-block; width: 50px; height: 50px; border: 1px solid blue; margin: 1px }
        </style>
    </head>
    <body>
        <div class="products">
            <div class="product"></div>
            <div class="product"></div>
            <div class="product"></div>
            <div class="product"></div>
            <div class="product"></div>
            <div class="product"></div>
            <div class="product"></div>
        </div>
    </body>
</html>


.products{文本对齐：对齐；高度：54px；溢出：隐藏}
.product{显示：内联块；宽度：50px；高度：50px；边框：1px纯蓝色；边距：1px}

该站点正在使用JavaScript使行以这种方式运行。您愿意使用JavaScript/jQuery吗？您需要支持哪些浏览器/版本？是的，我愿意使用JS/JQuery，该站点将已经使用最新的JQuery引擎。希望JS能支持所有的现代浏览器。我知道通常IE 7及以上版本会导致问题，但我可以在没有这些功能的情况下生活。所以我一直在尝试使用JQuery，看看是否可以让它工作，但我的头脑无法围绕我应该用数学做什么来完成这一点，不确定我是否走上了正确的道路，我用一些jquery/js代码编辑了原始帖子谢谢！这两种方法都成功了，所以我将只使用CSS方法。因为我没有足够的代表权，所以无法投票支持这个答案。但是谢谢你！