4

私はこの問題で立ち往生していて、これから抜け出すことができません。私を助けてください。

ここに画像の説明を入力してください

私のウェブページでは、コンテナdiv内で3つのdivを使用しました。div間の不要なギャップを削除しようとしています。

  • （1）トップbg画像
  • （2）ミドルbg画像
  • （3）下のbg画像

これらの3つのdivを調整して、1つのbg画像のように見せようとしています。真ん中の部分と下の部分は完全に調整されていますが、上の部分と真ん中の部分の間にギャップがあり、削除しようとしていますが、削除できません。

上と中のギャップを示す、ここに添付した画像を参照してください。画像の配置に使用したスタイルシートデータを参照してください。

前もって感謝します。

#main_container {
    background-repeat:no-repeat;
    width:645px;
    float:left;
    padding-bottom:10px;
    overflow:hidden;
    height:auto;
}
#middle_part {
    background-image: url('/DiscoverCenter/images/apps_mid.png');
    background-repeat:repeat-y;
    width:645px;
    padding-bottom:10px;
    overflow:hidden;
    height:auto;
    clear:both;
    position:relative;
    display: block;
    vertical-align: bottom;
}
#top_part {
    background-image:url('/DiscoverCenter/images/apps_top.png');
    width:645px;
    top:0px;
    height:47px;  /* actual height of the top bg image */
    clear:both;
    position:relative;
    display: block;
    vertical-align: bottom;
}
#bottom_part {
    background-image:url('/DiscoverCenter/images/apps_btm.png');
    width:645px;
    height:24px; /* actual height of the bottom bg image */
}
4

8 に答える 8

11

リセットの使用を検討しましたか？

* {
    padding: 0px;
    margin: 0px
}

それを一番上に追加します

しかし、私たちが主題に取り組んでいる間：あなたは丸みを帯びた角を得るために画像を使用していますか？最近では、CSSを使用してルーニングコーナーを取得できます。

これらを支援できるWebサイトは次のとおりです。

http://www.css3.info/preview/rounded-border/

于 2011-02-28T01:10:02.367 に答える
1

いくつかの調整はそれを修正します：

#main_container, #top_part, #middle_part, #bottom_part { margin:0; padding:0; width:645px; }
#main_container {
    float:left; 
    } /* setting height:auto and overflow:hidden won't do anything */

#top_part {
    background:url('/DiscoverCenter/images/apps_top.png') no-repeat;
    clear:both;
    height:47px;
    }
#middle_part {
    background:url('/DiscoverCenter/images/apps_mid.png') repeat-y;
    display: block; /* only needed if you're assigning this id to an inline element */
    min-height: ?? /* assure this element can expand, but never collapses completely */
    vertical-align: bottom;
    }
#bottom_part {
    background:url('/DiscoverCenter/images/apps_btm.png');
    height:24px;
    }

top_part、middle_part、bottom_partは、他の部分に接触する「側面」でない限り、すべてマージンまたはパディングを含めることができます（つまり、＃topの下部と#middleの上部は、移動せずに接触する必要があります）。

ここから始めて、どのようなプレゼンテーションの調整を行う必要があるかを確認してください。上、中、下からポジショニングを削除しました。これは、目的の効果とは関係がないためです。それらの中にアイテムを絶対的に配置するためにそれらを追加する必要があるかもしれませんが、それは別の投稿です。

于 2011-02-28T01:56:00.080 に答える
0

それはトップbgの画像サイズの問題でした。画像のサイズは45pixで、divのサイズを47pixとしました。divのサイズを小さくすることで、私の問題は解決しました。DawsonとDBzの助けに感謝します。

于 2011-02-28T19:51:57.483 に答える
0

自動を使用するのではなく、パディングを10pxではなく0に設定し、divの高さを明示的に設定することをお勧めします。

または、背景画像全体に対応するラッパーdivを作成して、一部のブラウザーで画像が整列しないことを心配する必要がないようにします...

于 2011-02-28T01:17:23.583 に答える
0

私は自分で問題を解決することができました

margin:-16px
于 2012-02-29T16:24:06.103 に答える
0

そのような場合、マージンリセットは私にとって完璧に機能します

于 2013-07-12T10:26:45.260 に答える
0

同じ問題が発生しました。これを修正できる唯一の方法は、ブラウザでInspectElementを使用し、マージンを-ve値に変更し続けることです。

于 2013-09-01T13:43:51.717 に答える
-1

これは、背景が3つ（上、中、下）で、それぞれがdivタグである場合に機能しました。

margin:-8px;

于 2012-08-20T00:07:19.380 に答える