将无序列表扩展到浏览器宽度(html/css)
expanding a unordered list to browser width (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
你可以让你的浏览器更细/更宽，看看行是如何表现的(我正在尝试做什么)，然后比较它与我的代码
试试内部调整处理程序
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
- 如何通过HTML+CSS中的另一个元素Selector更改元素的属性值
- 有没有一种方法可以仅使用HTML/CSS来隐藏基于特定值的数据单元格
- HTML/CSS-用于拖放的全页面覆盖
- 在向下滚动JS/HTML/CSS wordpress网站时替换徽标图像
- 限制对HTML/CSS/IMG或根索引文件夹的访问
- (html/css/javascript）试图使导航栏中的“当前页面”链接变成不同的颜色
- 将Rails后端添加到JS/HTML/CSS应用程序时，正确的文件位置是什么
- 将回车键映射到HTML/CSS/JS中的按钮
- 如何使用HTML/CSS/JavaScript开发桌面应用程序
- 如何在HTML CSS JavaScript中根据纵横比调整高度或宽度
- 如何在android中使用HTML/CSS赋予文本渐变颜色
- HTML/CSS/JS切换不同的谷歌日历是同一个框架
- HTML/CSS/JS 构建工具
- HTML/CSS 如何关闭菜单，然后使用 class=“active”
- 如何在HTML / CSS中填充垂直和滚动中间窗格(Chrome可以工作，但不能Firefox）
- 可以使用 HTML/CSS 创建静态照明效果叠加
- 如何在HTML/CSS/JS中为表/列表应用行虚拟化
- JS HTML CSS Accordion
- 这段代码有什么问题(responsible html-css-js）
