响应列在特定宽度上跳转

Question

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

在全分辨率下，我的主页由四列组成，但是，当窗口宽度低于 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>

CSS：

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

问题仅显示在大约 619px 的浏览器宽度上，然后第二行的第一列跳到下一行。

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

希望有人能帮帮我，真的很困扰我。

问候

Answer 1

这是因为你的盒子在调整大小时是不同的高度 - 第一个是将其他浮动推到一边。您可以通过将媒体查询设置为大约 515 像素到 640 像素之间的特定高度来解决此问题：

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

Answer 2

那是因为您的宽度为46%。改成21%

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