当缩放浏览器漂浮移动

Question

我有代码：

<div class="container"> 
    <li class="block2"></li> 
    <ul class="posts first"> 
    <li class="block"></li> 
    <li class="block"></li> 
    <li class="block"></li> 
    <li class="block"></li> 
    <li class="block"></li> 
    <li class="block"></li> 
    <li class="block"></li> 
    <li class="block"></li> 
    <li class="block"></li> 
    </ul> 
    <ul class="posts second"> 
    <li class="block"></li> 
    <li class="block"></li> 
    <li class="block"></li> 
    <li class="block"></li> 
    <li class="block"></li> 
    <li class="block"></li> 
    <li class="block"></li> 
    <li class="block"></li> 
    </ul> 
</div> 

和css：

container{ 
    width:940px; 
    margin: 0 auto; 
    padding:40px; 
    background:grey; 
} 
.container:after { 
    content: ""; 
    display: table; 
    clear: both; 
} 
.block{ 
    float:left; 
    border:1px solid #ccc; 
    width:216px; 
    height:186px; 
    margin: 0 0 20px 22px; 
    list-style: none; 
} 
.block2{ 
    float:right; 
    border:1px solid #fff; 
    clear:both; 
    width:217px; 
    height:603px; 
    list-style:none; 
} 
.posts{ 
    margin: 0; 
    padding: 0; 
} 
.first .block:nth-child(3n+1){ 
    margin-left:0px; 
    clear:left; 
} 
.second .block:nth-child(4n+1){ 
    margin-left:0px; 
    clear:left; 
} 

这是确定当浏览器缩放为100％，但是当我缩放浏览器窗口，25％，彩车将继续前进。我做错了什么，我该如何解决它？在小提琴代码：https://jsfiddle.net/92j5yr6c/1/

我需要像这样的25％的缩放link

Answer 1

与给定的代码来解决这个最简单的方法是恕我直言：

1）在你的CSS调整错误（我假设这只是JsFiddle的一个复制错误） - 你的容器类缺少使它成为一个类的时期。改变 container{到.container{

和2） 变化从border到outline（I假设这是可接受的），因为边界趋于保持上述宽，他们最终合计达更宽度“只是一个像素的一小部分”比可用。轮廓不增长对象，它只是位于顶部。

作品对我来说： https://jsfiddle.net/c0hfopug/