当我缩小 web 4 div 到下一行答案

【问题标题】：When i Zoom out web 4 div go down to next line当我缩小 web 4 div 到下一行
【发布时间】：2013-07-23 00:19:48
【问题描述】：

知道为什么当我缩小网站 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;}

【问题讨论】：

可能是像素舍入问题。如果你让 .wrapper 稍微宽一点，这有帮助吗？
我需要比所有其他的都大 50 像素。

标签： html css zooming out

【解决方案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;    
}

【讨论】：