Html 响应列在特定宽度上跳跃

这是我在这里的第一个问题，我搜索了这个网站，但我真的找不到一个像样的答案。我的问题很具体

在全分辨率下，我的主页由四列组成，但是，当窗口宽度小于960时，它会转换为两列，这是我使用的代码：

HTML：

<div class="columns">
    <div class="begin col14">
        <h2>Title</h2>
        Content
    </div>
    <div class="begin col14">
        <h2>Title</h2>
        Content
    </div>
  <div class="begin col14">
      <h2>Title</h2>
      Content
  </div>
  <div class="begin col14">
      <h2>Title</h2>
      Content
  </div>
</div>

问题只出现在619px左右的浏览器宽度上，然后第二行的第一列跳转到下一行

例如，请查看：www.visiamedia.nl

我希望有人能帮助我，这真的让我很烦恼

---

问候语

这是因为您的宽度为

46%

。将其更改为

21%

@media all and (max-width: 960px) {
    .begin {
        width:21%;
        margin:0px 2% 2em 2%;
        float:left;
    }
}

---

这是因为调整大小时，长方体的高度不同——第一个是将其他浮体推到一边。您可以通过将媒体查询设置为介于约515px到640px之间的特定高度来解决此问题：

@media all and (min-width: 515px) and (max-width: 640px) {
    .begin {
        height: 190px;
    }
}

---

我很抱歉，如果我没有说清楚，它的意思是变成一个两栏网站，所以我使用：宽度：50%；填充物：2%；为了确保一个栏目占据50%的可用空间，我刚刚访问了你的网站，它在不同分辨率下切换的方式似乎很好。我不明白你的问题是什么。它确实切换得很好，但跳转只发生在浏览器宽度约620px的地方（并且在变宽或变小后会很好地恢复）。下面是一个例子：在再次查看后，我想到了这一点，虽然列的宽度发生了变化（当浏览器调整大小时），但其中的文本高度发生了变化。当WEBDESIGN和HUISSTIJLEN都有不同的高度时，问题就出现了。我通过在一个容器div中包围两组div并添加clear:both修复了这个问题；当浏览器小于960px时，在该div上；无论如何，非常感谢您的回复！

@media all and (min-width: 515px) and (max-width: 640px) {
    .begin {
        height: 190px;
    }
}