Question

我喜欢使用马赛克，因为当用户增加浏览器的大小时，它会自动移动以找到最合适的效果。 5列可以非常好地调整为4列。我喜欢与此相似的效果，但没有＆＃34;移动以找到最合适的效果＆＃34;。

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

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

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

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

enter image description here

Answer 1

display: inline-block元素的排列方式。如果您希望它们统一而不是由实际内容决定，请与min-width结合使用。

示例：Live Copy

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

请注意，某些旧版本的IE不希望您使用默认为div并将其设为display: block的元素（如inline-block）。如果您需要支持它们，请使用默认为span的元素（如inline-block）。

平铺<div>元素，不带马赛克</div>

1 个答案: