0

私は最近、ウェブサイト ( http://willryan.us/typefun01 ) を設計しました。主に Chrome を使用してコーディングしながらテストを行いました。私は最近、特定のセクションの最後で奇妙なことが起こっていることに気付きました (歴史の後のギャップ、解剖学へのスタイルの重複)。

スタイルシートで css をリセットしました (それがこれと関係があるかどうかはわかりません)。何が原因なのか、Chrome で表示したときのようにサイトを表示する方法がわかりません。

4

2 に答える 2

1

History 後のギャップは、次の理由によるものです。

#historyWide {
    margin: 250px 80px 75px;
}

次の方法で修正できます。

div#content > div {
    overflow: hidden; /* or auto */
}

#content の子 div 内の要素の大きな上下マージンを、子 div 自体のパディングに移動することもできます。それらの子 div にすべてが含まれている限り、何でも機能します。

ブラウザが不完全なレイアウトを処理するさまざまな方法を見ているだけです。

于 2013-02-03T23:28:18.467 に答える
1

History の後のギャップを避けたい場合は、margin の代わりに historyWide のパディングを使用する必要があります。マージンは要素を引き離し、パディングは要素を大きくします

解剖学的に言えば、プロパティ「top」を使用して #styles を変更しているということです。これにより要素が移動しますが、親は要素の元のスペースのみを予約します。要素間の関係を維持する必要がある場合は、「トップ」よりもマージンとパディングを使用したほうがよいでしょう。

最後に、#stylesMono で行ったように要素を余白に配置します。段落を操作して垂直位置を維持し、そこから「p」の範囲内でフロート、マージン、パディングを操作する方がよいと思います。

于 2013-02-03T23:36:22.467 に答える