Question

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

如果屏幕是600px，那么两个100％div应该彼此相邻放置。如果屏幕是700px，那么三个233px（每个DIV 100％）应该彼此相邻放置。

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

我还希望有一个最小宽度（例如150px），这样每个DIV都不能小于一定数量。

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

Answer 1

在此示例中，当屏幕大于900px时，您将有4列;当屏幕达到900px时，它将下降到3列;当屏幕达到600px时，它将下降到2列;当达到300px时，它会下降到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略小。

Answer 2

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

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

DIV，最大宽度和最小宽度均匀分布

2 个答案: