Question

我正在试图弄清楚如何使用不小于200px但不大于400px的图块在CSS中制作网格。但是我希望它们在这些百分比之间缩放，现在它们保持最大值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>

Answer 1

将您的方框包装在一个父级div中，并使用父级{J}和孩子display: table。

像这样：

display: table-cell

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

1 个答案: