0

HTNL ページを作成したときは完璧に見えましたが、突然、ページの下部にこの巨大な空白ができてしまいました。http://thomaswd.com/pearinc2で見ることができます。どうすればこれを取り除くことができますか?! 私のスタイルシートはhttp://thomaswd.com/pearinc2/style.cssにあります

4

3 に答える 3

1

クラスを含む HTML 要素を見ると、back-iphone4sCSS を使用して相対的に配置されていることがわかります。

position: relativeCSS ルールからその部分を削除すると、.back-iphone4s空白がある場所に表示されることに気付くでしょう。

このように使用することは常に恐ろしいことです。要素が相対的に配置されていなければ、要素がposition: relativeあったはずの場所に空白が表示されます。

私がお勧めするのは、クラスとしてposition: relativediv に追加し、onを使用してそのメソッドを使用して位置を設定することです。このようにして、要素は、通常のドキュメント フローでの位置ではなく、親に対して相対的に配置されます。devicesposition: absolute;.back-iphone4sback-iphone4s

これを解決する方法は他にもたくさんあります。一見したところ、これら 2 つの iPhone を 1 つの画像に変えて、HTML や CSS を減らし、ダウンロードする画像を減らしたいと思うかもしれませんが、意図したようです。それらは目的のために分離されているため、おそらくそれは実行可能な解決策ではありません.

...ふう、それが理にかなっていることを願っています。今なら教えてください。

于 2013-01-25T14:37:03.113 に答える
0

クラスに aheightを与える:.devices

.devices {height: 520px;}

于 2013-01-25T14:21:57.013 に答える
0

あなたのスタイルをざっと見たところ、技術的に非常に醜いことがわかりました。すべての主要な要素を position:absolute で設定し、それらをコンテキストとコンテンツ フローから独立させました。それらは絶対的であるため、高さを指定する必要があります。これにより、醜い空白のようなものが発生します。ページのスタイリング/構造化の概念が間違っていると思います。

非常にまれな "position:absolute" を使用してみてください!

于 2013-01-25T14:30:14.077 に答える