具有最大宽度和最小宽度的 DIV 以均匀分布答案

【问题标题】：DIV with max-width and min-width to evenly spread具有最大宽度和最小宽度的 DIV 以均匀分布
【发布时间】：2013-06-03 05:13:29
【问题描述】：

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

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

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

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

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

【问题讨论】：

您希望它们始终为 300 像素，还是希望它们随着屏幕缩小到最大 150 像素而缩小，然后再创建一行？
是的，我希望它们能够随着屏幕变小而缩小。

标签： css responsive-design

【解决方案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 稍微小一些。

【讨论】：

它接近我想要的，但仍有一些屏幕尺寸会在右侧留下一些空白空间。见这里：jsfiddle.net/ezdMn/3
它的边界打破了它。尝试使用不同的背景颜色，或者将 %s 稍微小一点。

【解决方案2】：

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

我（今天）尚未对其进行测试，但我认为这将在达到最小尺寸之前有效。

【讨论】：