Question

我要做的是有一个显示产品的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>

让您了解我要做的事情：http://www.overstock.com/Home-Garden/Art-Gallery/216/dept.html

您可以让浏览器更薄/更宽，看看行的行为（我想做的事情），然后将它与我的代码进行比较。

Answer 1

尝试调整内部调整处理程序

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-block和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>

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

1 个答案: