css - 具有 max-width 和 min-width 的 DIV 均匀分布

Question

我正在尝试创建一个布局，其中每个 DIV 的最大宽度为 300 像素。

如果屏幕是 600 像素，那么两个 100% 的 div 应该并排放置。如果屏幕是 700px，那么三个 233px(每个 DIV 100%)应该并排放置。

这意味着 DIV 应始终占据屏幕宽度的 100%。

我还想有一个最小宽度(例如 150px)，这样每个 DIV 都不能小于一定数量。

这意味着在小屏幕上我可能会得到两列 DIV，而在大屏幕上我可能会得到四列或更多列和 DIV。

Answer 1

在此示例中，当屏幕大于 900 像素时，您将有 4 列，当屏幕达到 900 像素时，它将减少到 3 列，当屏幕达到 600 像素时，将减少到 2 列，当屏幕达到 300 像素时，将减少到 1 列。这将使 div 占据 100% 的屏幕，最大宽度将始终为 300px(除了大于 1200px 宽的屏幕，您仍将获得 4 列)

  div {
    width: 25%; /* anything above 900px and there will be 4 columns */
    min-width: 150px;
    float: left;
    height: 200px;
  }

  @media screen and (max-width: 900px) {
    div { width: 33%; }
  }

  @media screen and (max-width: 600px) {
    div { width: 50%; }
  }

  @media screen and (max-width: 300px) {
    div { width: 100%; }
  }

这可以修改为具有任意数量的列和任意数量的不同阈值屏幕尺寸，其中列数将发生变化。

如果您有边框或边距，您还必须使宽度 %s 稍微小一些。