0

我试图弄清楚如何在 CSS 中使用不小于 200 像素但不大于 400 像素的图块制作网格。但我希望它们在这些百分比之间进行缩放，现在它们保持在 400 的最大值，如果你缩小窗口，它们就会下降到下一行。我宁愿让它们都缩小到 350 像素并且仍然合适，或者 300 像素而不是仅仅环绕。提前谢谢。

<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>
4

1 回答 1

0

将您的盒子包装在一个父 div 中，并display: table在父级和display: table-cell子级上使用。

像这样：

.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 */
}
于 2013-01-23T00:28:10.267 回答