2

これは私の最初の質問です。サイトを検索しましたが、まともな答えが見つかりませんでした。私の問題はかなり具体的です。

フル解像度では、ホームページは 4 列で構成されていますが、ウィンドウ幅が 960 を下回ると、2 列に変換されます。これは私が使用したコードです。

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 の場合にのみ表示され、2 行目の最初の列が次の行にジャンプします。

例については、www.visiamedia.nl を確認してください。

誰かが私を助けてくれることを願っています、それは本当に私を悩ませています。

ご挨拶

4

2 に答える 2

1

これは、サイズ変更時にボックスの高さが異なるためです。最初のボックスは他のフロートを押しのけています。約 515px から 640px の間の特定の高さのメディア クエリを設定することで、問題を解決できる可能性があります。

@media all and (min-width: 515px) and (max-width: 640px) {
    .begin {
        height: 190px;
    }
}
于 2013-08-13T21:51:48.023 に答える