在调整浏览器大小时，我希望在应用类 .categoryTableArea 的 DIV 右侧不应该有任何空白，而是应该重新调整类别图标的大小。如果类别图标的大小达到最小图标大小，它应该换行/移动到下一行。
响应式类别图标应覆盖 DIV 中应用类 .categoryTableArea 的所有可用区域。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
color: #FC0;
}
.categoryTableArea {
display: table;
width: 100%;
background-color: #DFDFDF;
margin: 0 auto;
}
.categoryArea {
min-width: 110px;
max-width: 150px;
margin: 4px;
background-color: white;
float: left;
}
.categoryIcon {
width: 100px;
height: 88px;
background-color: blue;
margin: 0 auto;
margin-top: 4px;
}
.categoryName {
color: #666666;
text-align: center;
font-size: 0.8em;
color: #2f2f2f;
margin-top: 4px;
margin-bottom: 6px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class="categoryTableArea">
<div class="categoryArea">
<div class="categoryIcon">
Image
</div>
<p class=categoryName>Category Name 01</p>
</div>
<div class="categoryArea">
<div class="categoryIcon">
Image
</div>
<p class=categoryName>Category Name 02</p>
</div>
<div class="categoryArea">
<div class="categoryIcon">
Image
</div>
<p class=categoryName>Category Name 03</p>
</div>
<div class="categoryArea">
<div class="categoryIcon">
Image
</div>
<p class=categoryName>Category Name 04</p>
</div>
<div class="categoryArea">
<div class="categoryIcon">
Image
</div>
<p class=categoryName>Category Name 05</p>
</div>
<div class="categoryArea">
<div class="categoryIcon">
Image
</div>
<p class=categoryName>Category Name 06</p>
</div>
<div class="categoryArea">
<div class="categoryIcon">
Image
</div>
<p class=categoryName>Category Name 07</p>
</div>
<div class="categoryArea">
<div class="categoryIcon">
Image
</div>
<p class=categoryName>Category Name 08</p>
</div>
<div class="categoryArea">
<div class="categoryIcon">
Image
</div>
<p class=categoryName>Category Name 09</p>
</div>
<div class="categoryArea">
<div class="categoryIcon">
Image
</div>
<p class=categoryName>Category Name 10</p>
</div>
</div>
</body>
</html>
最佳答案
你可以使用 flexbox 来做到这一点
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
color: #FC0;
}
.categoryTableArea {
display: flex;
flex-wrap:wrap;
width: 100%;
background-color: #DFDFDF;
margin: 0 auto;
}
.categoryArea {
flex: 1;
min-width: 110px;
max-width: 150px;
margin: 4px;
background-color: white;
float: left;
}
.categoryIcon {
width: 100px;
height: 88px;
background-color: blue;
margin: 0 auto;
margin-top: 4px;
}
.categoryName {
color: #666666;
text-align: center;
font-size: 0.8em;
color: #2f2f2f;
margin-top: 4px;
margin-bottom: 6px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}<body>
<div class="categoryTableArea">
<div class="categoryArea">
<div class="categoryIcon">
Image
</div>
<p class=categoryName>Category Name 01</p>
</div>
<div class="categoryArea">
<div class="categoryIcon">
Image
</div>
<p class=categoryName>Category Name 02</p>
</div>
<div class="categoryArea">
<div class="categoryIcon">
Image
</div>
<p class=categoryName>Category Name 03</p>
</div>
<div class="categoryArea">
<div class="categoryIcon">
Image
</div>
<p class=categoryName>Category Name 04</p>
</div>
<div class="categoryArea">
<div class="categoryIcon">
Image
</div>
<p class=categoryName>Category Name 05</p>
</div>
<div class="categoryArea">
<div class="categoryIcon">
Image
</div>
<p class=categoryName>Category Name 06</p>
</div>
<div class="categoryArea">
<div class="categoryIcon">
Image
</div>
<p class=categoryName>Category Name 07</p>
</div>
<div class="categoryArea">
<div class="categoryIcon">
Image
</div>
<p class=categoryName>Category Name 08</p>
</div>
<div class="categoryArea">
<div class="categoryIcon">
Image
</div>
<p class=categoryName>Category Name 09</p>
</div>
<div class="categoryArea">
<div class="categoryIcon">
Image
</div>
<p class=categoryName>Category Name 10</p>
</div>
</div>
</body>
</html>有关更多信息，请查看 https://css-tricks.com/snippets/css/a-guide-to-flexbox/
关于html - 响应式类别图标应使用 HTML 和 CSS 覆盖所有可用的 DIV 区域，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32270571/