css - 具有最大宽度和最小宽度的 DIV 以均匀分布

Question

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

如果屏幕为 600 像素，则应将两个 100% 的 div 并排放置。如果屏幕为 700 像素，则应将三个 233 像素（每个 DIV 100%）并排放置。

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

我还想要一个最小宽度（例如 150px），这样每个 DIV 就不能小于一定的数量。

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

Answer 1

在此示例中，当屏幕大于 900 像素时，您将有 4 列，当屏幕达到 900 像素时它会下降到 3 列，然后当屏幕达到 600 像素时会下降到 2 列，当屏幕达到 300 像素时会下降到 1 列。这将使 div 占据 100% 的屏幕，最大宽度始终为 300 像素（屏幕宽度大于 1200 像素除外，您仍将获得 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 稍小一些。

Answer 2

div
{
width:33.3333%;
    min-width:150px;
    max-width:300px;
    display:inline-block;
    background:#EFEFEF;
    border:1px solid #CCC;
    height:100px;
}

我（今天）还没有测试过它，但我认为这将一直有效，直到达到最小尺寸。