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（我认为这是可以接受的），因为边界往往高于＆＃34;只是像素的一小部分＆＃34;宽，他们最终加起来比可用的宽度更多。并且轮廓不会使对象生长，它只是位于顶部。

适合我： https://jsfiddle.net/c0hfopug/

缩放浏览器浮动时移动

1 个答案: