Javascript 瓷砖<；部门>；没有马赛克的元素_Javascript_Jquery_Html_Css

Javascript 瓷砖<；部门>；没有马赛克的元素

javascript jquery html css

Javascript 瓷砖<；部门>；没有马赛克的元素,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我喜欢使用mosaic，因为当用户增加浏览器的大小时，它会自动移动以找到最合适的。5列可以很好地调整为4列。我想要一个类似的效果，但没有“寻找最合适的移动” 现在我使用一个表来存储一些数据，每个单元格大小为300x250。当用户增加页面的大小时，问题就出现了，因为单元格是刚性的，不会减少列的大小来进行补偿，而我最终得到的单元格超出了页面的宽度，因此需要滚动我怎样才能达到这个效果？总结如下：例如，从跨越页面宽度的5列开始如果用户放大到某个元素超出页面宽度的点，则将其改为四列如果用户缩小，

我喜欢使用mosaic，因为当用户增加浏览器的大小时，它会自动移动以找到最合适的。5列可以很好地调整为4列。我想要一个类似的效果，但没有“寻找最合适的移动”

现在我使用一个表来存储一些数据，每个单元格大小为300x250。当用户增加页面的大小时，问题就出现了，因为单元格是刚性的，不会减少列的大小来进行补偿，而我最终得到的单元格超出了页面的宽度，因此需要滚动

我怎样才能达到这个效果？总结如下：

例如，从跨越页面宽度的5列开始
如果用户放大到某个元素超出页面宽度的点，则将其改为四列
如果用户缩小，让它返回到五列（但限制为五列）

有没有一个简单的方法来获得这个平铺方案？下面是一张图片来说明：

元素就是这样布置的。如果您希望它们统一，而不是由其实际内容决定，请结合

min width

例如：


例子
.盒子{
显示：内联块；
边框：1px纯黑；
最小宽度：100px；
文本对齐：居中；
边缘底部：2px；
右边距：2px；
}
1.
2.
3.
4.
5.

请注意，一些旧版本的IE不希望您采用默认为

display:block

的元素（如

div

），而是将其设置为

inline block

。如果需要支持它们，请使用默认为

内联块的元素（如span
）
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Example</title>
  <style>
    .box {
      display: inline-block;
      border: 1px solid black;
      min-width: 100px;
      text-align: center;
      margin-bottom: 2px;
      margin-right: 2px;
    }
  </style>
</head>
<body>
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
</body>
</html>