我正在尝试为网站创建一个 metro UI 风格的平铺网格，但我在保持尺寸“静态”方面遇到了一些困难。我目前正在使用 CSS3 列从上到下然后从左到右对 div 进行排序。我现在遇到的唯一问题是我可以将 GAP 列设为静态，但大多数浏览器仍会尝试调整列内的 div 的大小
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div.dashboard").mousewheel(function(event, delta){
this.scrollLeft -= (delta * 50);
event.preventDefault();
});
});
</script>
<style>
.tile
{
margin: 2px;
display: inline-block;
column-break-inside: avoid;
-ie-column-break-inside: avoid;
-moz-column-break-inside: avoid;
-webkit-column-break-inside: avoid;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
float: none;
color: #CDCDCD;
padding-left: 3px;
cursor: pointer;
border: 2px solid white;
width: 180px;
}
.tile:hover
{
border:2px solid gray;
}
.tile span{
font-weight: bolder;
padding: 3px;
font-family:"Times New Roman", Times, serif;
}
.ONE
{
background-color: #894848;
}
.TWO
{
background-color: #596996;
}
.THREE
{
background-color: #3f5f3e;
}
.dHeight
{
height: 355px;
}
.sHeight
{
height: 175px;
}
.dashboardContainer
{
columns: 150px auto;
-moz-columns: 175px auto;
-webkit-columns: 150px auto;
column-gap: 4px;
-moz-column-gap: 4px;
-webkit-column-gap: 4px;
height: 600px;
//width: 3600px;
}
.dashboard
{
overflow-x: scroll;
}
</style>
</head>
<body >
<div class="dashboard">
<div class="dashboardContainer">
<div class="tile THREE sHeight">
1
</div>
<div class="tile TWO sHeight">
2
</div>
<div class="tile ONE dHeight">
3
</div>
<div class="tile TWO dHeight">
4
</div>
<div class="tile THREE sHeight">
5
</div>
<div class="tile TWO sHeight">
6
</div>
<div class="tile THREE dHeight">
7
</div>
<div class="tile ONE sHeight">
8
</div>
<div class="tile ONE sHeight">
9
</div>
<div class="tile THREE sHeight">
10
</div>
<div class="tile TWO sHeight">
11
</div>
<div class="tile THREE sHeight">
12
</div>
</div>
</div>
</body>
</html>
示例:JSFiddle
基本上，当用户调整网络浏览器的大小时，我只是想阻止内部的 div 调整大小。
最佳答案
Fiddle
.tile{
......
width: 180px;
}
在你的 css 中，你为 tile 设置了 180px 的宽度
.dashboardContainer
{
columns: 150px auto;
-moz-columns: 175px auto;
-webkit-columns: 150px auto;
column-gap: 4px;
-moz-column-gap: 4px;
-webkit-column-gap: 4px;
height: 600px;
//width: 3600px;
}
您已将列宽设置为 150 像素；这就是出现调整大小问题的原因
两者具有相同的值。
关于css - 防止列调整内容大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24416546/