當我縮小web 4 div去下一行

Question

任何想法，爲什麼當我縮小網站4div總是下到下一行。演示：http://autovin.org/tp/

/* Reset All Styles */ 
* {padding:0px; margin:0px;font-family:Segoe UI;} 
/* Background */ 
body {background:url(images/grids.gif) white;} 
/* Wrapper */ 
.wrapper {width:998px;margin:0 auto;} 
/* Header */ 
.header {padding:20px 0 20px 0;} 
/* Navigation */ 
.nav {background:#82b2c9;color:white;} 
/* Content */ 
.content {padding:10px 0;overflow:hidden;} 
/* Box */ 
.box {width:240px; margin:0 10px 10px 0;border:1px solid black;float:left;} 
.box:nth-child(4n){margin:0;} 
/* Pagination */ 
.pagination {clear:both;} 
/* Footer */ 
.footer {background:#82b2c9;color:white;} 

Answer 1

我只想用百分比和em單位而不是像素，因爲瀏覽器是多與他們更兼容。但就你而言，我不會看到人們放大那麼遠。你想快速修復，但我建議從頭開始重新考慮這個問題。閱讀有關箱子大小和百分比。箱子大小是超級偉大的。祝你好運！

http://jsfiddle.net/sheriffderek/xr6nC/

HTML

<ul> 
     <li><a href="#">Your block of text</a></li> 
     <li><a href="#">Your block of text</a></li> 
     <li><a href="#">Your block of text</a></li> 
     <li><a href="#">Your block of text</a></li> 
     <li><a href="#">Your block of text</a></li> 
     <!-- etc. --> 
    </ul> 

</div> 

CSS

.container { 
    width: 100%; 
    max-width: 40em; /* whatever you want */ 
    border: 1px solid red; 
    overflow: hidden; 
} 

.container ul { 
    padding: 0; 
    margin: 0; 
    list-style: none; 
} 

.container a { 
    width: 22%; /* this isn't perfect - but it would be 23.5% - if you were to use box-sizing: border-box; */ 
    /* which I highly recomend you make part of your workflow in every project */ 
    float: left; 
    border: 1px solid black; 
    min-height: 5em; 
    margin-right: 2%; 
    margin-bottom: 2%; 
} 

.container li a:nth-of-type(4n+4) { 
    margin-right: 0;  
}