4

サービス ページの下部に不明な空白が表示されます。column-count: 2;画像を 2 つの列に分割するために使用しています。

更新: これは Webkit ブラウザーの問題です

問題mainContは、左側の列の下部にある余分なスペースです。

画像がすべて平らに並んでいる場合、約 30 ピクセルの不要な空白があります。ただし、画像が一列に並んでいない場合は、約 50 ～ 70 ピクセルの余分な余白があります。メイン コンテナーに 10 ピクセルのパディングがありますが、余分なスペースを作成しているものを見つけることができません。

問題が何であるかを確認するためのJSFIDDLE (コードを表示するには URL を削除/表示)を次に示します。また、ここにはライブ サイトがあり、各サービス ページにどのように影響するかを確認できます。

メイン コンテナの CSS:

.mainCont {
    width: 100%;
    background: #f7f7f7;
    padding: 10px;
    position: relative;
    margin-top: 2.5%;
}

編集

下部に約160px20 ピクセルを引いた余分なスペースがあります (mainCont と gridbox img はパディングで 20 ピクセルに等しい)。

余分なスペースと画像のパディング

4

1 に答える 1

3

昨日から研究してます。

  1. 画像サイズが同じならどのブラウザでも問題なし
  2. 画像サイズが異なる場合、ページ下部に余分なスペースが発生します。

これは chrome ブラウザのバグです。バランシング アルゴリズムに問題があります。彼らはまだこの問題を解決していません。ここで見ることができます

于 2014-01-13T19:26:12.000 に答える