扩展以填充空间但保持最小宽度的Div

Question

考虑以下HTML：

<div id="squares">
  <div class="square">text</div>
  <div class="square">text</div>
  <div class="square">text</div>
  <div class="square">text</div>
  <div class="square">text</div>
  <div class="square">text</div>
</div>

如何使用CSS来设置每个.square的样式，使其宽度至少（例如）200像素，但会扩展到尽可能宽？例如，如果#squares宽度为750像素，则每个.square应为250像素宽。如果#squares宽度为800像素，则每个.square应为200像素宽。

Answer 1

但它仅适用于750px宽：

.square {
  min-width: 200px;
  width: 33.333%;
}

#squares {
   width: 750px;
}

Answer 2

“请考虑以下HTML：”

此HTML不正确。在.squares上面有一个结束div，下面还有一个额外的结束div。

“我如何使用CSS来设置每个.square的样式......”

您的标记正确无误。 （除了2个不必要的结束div。）现在你选择选择器.square并制定一个规则：规则由你的选择器和一个或多个属性和值的声明组成。

.selector {
    property: value;
}

“这样它的宽度至少（例如）200像素，但会扩展到尽可能宽？”

.square {
    width: 100% /* the full width possible */
    min-width: 200px; /* but at least, 200px */
}

“如果#squares宽度为750像素，则每个.square应为250像素宽。”

*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
} /* look it up */

#squares {
    width: 100%;
    max-width: 750px; /* to keep it squishy */
    float: left; /* because I don't want to clear-fix this - you should though */
}

#squares .square {
    width: 100%;
    min-width: 200px;
    max-width: 33.333333%; /* a third of the parent to make 250px ? */
    float: left; /* to make a grid */
    border: 1px solid red;
}

@media only screen and (min-width: 800px) {

    #squares .square {
        max-width: 25%;
    }

}

这是一个起点，但我不确定你想要什么，这些风格开始冲突很快。您可以使用a jsFiddle。