0

CSS で 200px より小さくはないが 400px より大きくないタイルでグリッドを作成する方法を理解しようとしています。しかし、これらのパーセンテージの間でスケールインしたいのですが、現在は最大400のままで、ウィンドウを縮小すると、次の行にドロップダウンします. 両方とも 350px に縮小して収まるか、単にラップするのではなく 300px にしたいです。事前にt​​hx。

<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 に答える