Html 使用最小宽度和最大宽度缩放CSS平铺网格_Html_Css

Html 使用最小宽度和最大宽度缩放CSS平铺网格

html css

Html 使用最小宽度和最大宽度缩放CSS平铺网格,html,css,Html,Css,我试图弄清楚如何在CSS中使用不小于200px但不大于400px的分片创建网格。但我希望它们在这些百分比之间进行缩放，现在它们的最大值保持在400，如果你缩小窗口，它们只会下降到下一行。我宁愿它们都收缩到350px并且仍然合适，或者300px而不是仅仅包装。thx提前 <html> <head> <title></title> <style type="text/css"> .boxes{ mi

我试图弄清楚如何在CSS中使用不小于200px但不大于400px的分片创建网格。但我希望它们在这些百分比之间进行缩放，现在它们的最大值保持在400，如果你缩小窗口，它们只会下降到下一行。我宁愿它们都收缩到350px并且仍然合适，或者300px而不是仅仅包装。thx提前

<html>
<head>
    <title></title>
    <style type="text/css">

    .boxes{
        min-width: 200px;
        max-width: 400px;
        width: auto;
        height: 200px;
        background-color: #dedede;
        float: left;
        margin-right: 20px;     
        margin-bottom: 20px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        -khtml-border-radius: 5px;
        border-radius: 5px;
        padding: 15px;

    }
    </style>
</head>
<body>

<div class="boxes">Aenean malesuada feugiat scelerisque. Aliquam ultricies sem nunc, id tempus est. Donec et dui sem. Donec et diam nunc. Nullam vel pulvinar dui. In aliquet feugiat magna vel eleifend. Suspendisse fermentum tincidunt urna, ut sagittis enim blandit non. In placerat, libero et convallis molestie, eros ipsum imperdiet nisi, quis cursus mi dolor eu elit.</div>
<div class="boxes">Aenean malesuada feugiat scelerisque. Aliquam ultricies sem nunc, id tempus est. Donec et dui sem. Donec et diam nunc. Nullam vel pulvinar dui. In aliquet feugiat magna vel eleifend. Suspendisse fermentum tincidunt urna, ut sagittis enim blandit non. In placerat, libero et convallis molestie, eros ipsum imperdiet nisi, quis cursus mi dolor eu elit.</div>
<div class="boxes">Aenean malesuada feugiat scelerisque. Aliquam ultricies sem nunc, id tempus est. Donec et dui sem. Donec et diam nunc. Nullam vel pulvinar dui. In aliquet feugiat magna vel eleifend. Suspendisse fermentum tincidunt urna, ut sagittis enim blandit non. In placerat, libero et convallis molestie, eros ipsum imperdiet nisi, quis cursus mi dolor eu elit.</div>
<div class="boxes">Aenean malesuada feugiat scelerisque. Aliquam ultricies sem nunc, id tempus est. Donec et dui sem. Donec et diam nunc. Nullam vel pulvinar dui. In aliquet feugiat magna vel eleifend. Suspendisse fermentum tincidunt urna, ut sagittis enim blandit non. In placerat, libero et convallis molestie, eros ipsum imperdiet nisi, quis cursus mi dolor eu elit.</div>
<div class="boxes">Aenean malesuada feugiat scelerisque. Aliquam ultricies sem nunc, id tempus est. Donec et dui sem. Donec et diam nunc. Nullam vel pulvinar dui. In aliquet feugiat magna vel eleifend. Suspendisse fermentum tincidunt urna, ut sagittis enim blandit non. In placerat, libero et convallis molestie, eros ipsum imperdiet nisi, quis cursus mi dolor eu elit.</div>

</body>
</html>


.盒子{
最小宽度：200px；
最大宽度：400px；
宽度：自动；
高度：200px；
背景色：#dedede；
浮动：左；
右边距：20px；
边缘底部：20px；
-moz边界半径：5px；
-webkit边界半径：5px；
-khtml边界半径：5px；
边界半径：5px；
填充：15px；
}
埃尼安·马莱苏阿达封建权杖。别有用心的人，我是暴风雨。Donec et dui sem。不要这样做。pulvinar酒后驾车。在《大哀歌》中。发酵悬液。在适当的位置上，自由人和共事者、厄洛斯·伊普斯姆·尼西、奎斯·库苏斯·米多尔或欧盟精英。
埃尼安·马莱苏阿达封建权杖。别有用心的人，我是暴风雨。Donec et dui sem。不要这样做。pulvinar酒后驾车。在《大哀歌》中。发酵悬液。在适当的位置上，自由人和共事者、厄洛斯·伊普斯姆·尼西、奎斯·库苏斯·米多尔或欧盟精英。
埃尼安·马莱苏阿达封建权杖。别有用心的人，我是暴风雨。Donec et dui sem。不要这样做。pulvinar酒后驾车。在《大哀歌》中。发酵悬液。在适当的位置上，自由人和共事者、厄洛斯·伊普斯姆·尼西、奎斯·库苏斯·米多尔或欧盟精英。
埃尼安·马莱苏阿达封建权杖。别有用心的人，我是暴风雨。Donec et dui sem。不要这样做。pulvinar酒后驾车。在《大哀歌》中。发酵悬液。在适当的位置上，自由人和共事者、厄洛斯·伊普斯姆·尼西、奎斯·库苏斯·米多尔或欧盟精英。
埃尼安·马莱苏阿达封建权杖。别有用心的人，我是暴风雨。Donec et dui sem。不要这样做。pulvinar酒后驾车。在《大哀歌》中。发酵悬液。在适当的位置上，自由人和共事者、厄洛斯·伊普斯姆·尼西、奎斯·库苏斯·米多尔或欧盟精英。

将方框包装在一个父div中，并在父div上使用

显示：表格

，在子div上使用

显示：表格单元格

像这样：

.boxes {
  max-width: 400px;
  min-width: 200px;
  width: auto;
  height: 200px;
  background-color: #dedede;
  margin-right: 20px;
  margin-bottom: 20px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
  padding: 15px;
  display: table-cell;
}
.boxes-parent {
  display: table;
  border-spacing: 15px; /* for spacing boxes apart */
}