html - 响应列在特定宽度上跳转

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

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

@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;
    }
}