使用最小宽度和最大宽度缩放CSS Tile Grid

我想弄清楚如何使用不会小于200px，但不大于400px的tile制作CSS的网格。但是我希望他们能够在这些百分比之间进行扩展，现在他们保持在400以上，如果你缩小窗口，他们就会下降到下一行。我宁愿让它们缩小到350px，仍然适合，或者300px而不是只是包装。 thx提前。使用最小宽度和最大宽度缩放CSS Tile Grid

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

来源

2013-01-22 user2002128

裹在一个单亲格的箱子，并在儿童使用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-23 00:28:10 zakangelle

使用最小宽度和最大宽度缩放CSS Tile Grid

回答

相关问题