堆棧內存溢出
  簡體   English   中英

將無序列表擴展到瀏覽器寬度（html / css）

[英]expanding a unordered list to browser width (html/css)

 原文  2011-08-22 20:07:46  2   1    javascript/ jquery/ html/ css

問題描述

我正在嘗試做的是顯示產品的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

您可以使瀏覽器更薄/更寬，並查看行的行為（我正在嘗試執行的操作），然后將其與我的代碼進行比較。

1 個解決方案

解決方案1
 1 已采納  2011-08-23 03:46:51

嘗試在內部調整大小處理程序 

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');

有時您可以擺脫顯示：內聯塊和文本對齊：對齊，例如 

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

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 使用無序列表擴展DIV 對象列表到 HTML 無序列表 即使在CSS中設置了寬度，主體的寬度仍在擴大 無序列表，列表項，JS / HTML問題 CSS相對背景未在插入html代碼時擴展 CSS和HTML：如何在點擊時創建展開式DIV？ 使用CSS將無序列表的li元素居中 使用CSS顯示子菜單而不使用無序列表 HTML表格寬度與CSS 擴大寬度和高度 <div> 使用jQuery而不是CSS的鼠標懸停元素？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM