0

次へ/前へのボタンと # のうちのページ # を含む小さな div があります。問題は、Chrome ではなく Firefox でのみ表示されることです。Foundation 4 のボタン コードと Jekyll のページネーター コードを使用してセットアップを作成します。

ページの右下、tx0rx0.comのフッターのすぐ上に表示 されます。私のラップトップの Chromium では何も表示されませんが、コードはページ ソース ビューアーにあります。何を与える？

4

2 に答える 2

2

.pagination div のコンテナにはフローティング要素がありますが、クリアされていません。

コンテナーは #wrap 内の最後の要素であるため、フローティング .pagination を切り離すこのクラスの影響を受けます。

#wrap > *:last-child {
  padding-bottom: 6.25em;
}

これを修正するには、padding-bottom を margin-bottom に変更するか、float .pagination 要素を含む div に clear-fix を適用します。

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
于 2013-09-03T00:20:11.410 に答える
1

あなたはこれを行っています：

#wrap {
  margin: 0 auto -6.25em;
}

そして、そのコンテナの下マージンは -6.25em に設定されています。これも起こっています：

#wrap > *:last-child {
  padding-bottom: 6.25em;
}

これは、6.25emを持つの最後の子divを効果的に選択しています。ここでの意図は、これら 2 つが互いに打ち消し合うことです。スタイルは、通常のドキュメント フローにあるさまざまなブロック要素に適用されるためです。したがって、負のマージンのため、ページャーは非表示になっています。#wrappadding-bottom

ここであなたの意図がわかりません。これを行うことができない何らかの理由がない限り、簡単な修正は次のとおりです。

#wrap {
  margin: 0 auto;
}

そして、これを一掃します：

#wrap > *:last-child {
  padding-bottom: 6.25em;
}
于 2013-09-03T00:25:58.913 に答える