1

div があり、その div 内に画像があり、すべてのマージンが 0 に設定されています。 .

Div をセクションに変更し、負のマージンを与え、高さを 100% にしようとしましたが、何も機能しません!

サイトへのリンクは次のとおりです: http://www.webdesignstudents.co.uk/students/loai_shehadeh/1/portfolio.html ページのソースを表示することで完全なコードを見ることができますが、私が使用している HTML は次のとおりです。これ：

        <div class="wrapperB">
            <div class="content">
                <div id="portfolio-sectionB" class="all">
                    <div id="grid1"><!--Gird 1-->   

                        <div class="galleryItemB visualIdentity">
                            <img alt="Brighton and Hove In Bloom Logo" src="portfolio/images/brighton-in-bloom-logo-mockup-1.jpg">
                            <a href="portfolio/brighton-in-bloom.html"></a>
                        </div>  

                        <div class="galleryItemB visualIdentity">
                            <img alt="" src="portfolio/images/hovecollege-course-magazine-mockup2.jpg">
                            <a href="portfolio/hovecollege-course-magazine.html"><p>Click To View Project</p></a>
                        </div>  

                        <div class="galleryItemB visualIdentity">
                            <img alt="" src="portfolio/images/brighton-pet-show-poster-mockup3.jpg">
                            <a href="portfolio/brighton-pet-show.html"><p>Click To View Project</p></a>
                        </div>  

                        </div><div id="grid2"><!--Gird 2--> 

                        <div class="galleryItemB visualIdentity">
                            <img alt="" src="portfolio/images/ambition-world-bussiness-card-mockup.jpg">
                            <a href="portfolio/ambition-world.html"><p>Click To View Project</p></a>
                        </div>  

                        </div><div id="grid3"><!--Gird 3--> 

                        <div class="galleryItemB visualIdentity">
                            <img alt="" src="portfolio/images/brighton-pet-show-logo-mockup.jpg">
                            <a href="portfolio/brighton-pet-show.html"><p>Click To View Project</p></a>
                        </div>  

                        <div class="galleryItemB webDesign visualIdentity">
                            <img alt="" src="portfolio/images/animal-recuse-group-logo-mockup.jpg">
                            <a href="portfolio/animal-rescue-group.html"><p>Click To View Project</p></a>
                        </div>  

                        </div>                      
                    </div>      
                </div>
            </div>

CSS

         #portfolio-sectionA {
         margin: 10px 20px;
              }

      #portfolio-sectionA a {
    color: #CED9E7;
    padding: 7px 10px;
    margin-left: -1px;

    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}

#portfolio-sectionA a:hover {
    color: #9BAFCE;
}

#portfolio-sectionA a:active, #portfolio-sectionA a.portfolio-sectionAClicked {
    color: #4E6C98;
    background-color: #3C5476;  
    cursor: default;
}

  /*---Portoflio Page Section B---*/
        .galleryItemB {
background-color: green;
position: relative;

         }

#portfolio-sectionB .galleryItemB a {
    position: absolute; left: 0; top: 0; right: 0; bottom: 0;
    background: url(../elements/magnifying-glass.png) center center no-repeat rgba(78,108,152,.85);
    cursor: pointer;

    opacity: 0;
    -moz-opacity: 0;
    -khtml-opacity: 0;
    filter:alpha(opacity=0);

    -webkit-transition: opacity 0.2s linear;
    -moz-transition: opacity 0.2s linear;
    -ms-transition: opacity 0.2s linear;
    -o-transition: opacity 0.2s linear;
    transition: opacity 0.2s linear;
}

#portfolio-sectionB .galleryItemB:hover a {
    opacity: 1;
    -moz-opacity: 1;
    -khtml-opacity: 1;
    filter:alpha(opacity=100);
}

#portfolio-sectionB .galleryItemB a p{
    color: #FFFFFF;
    position: absolute; bottom: 15px; right: 20px;
    cursor: pointer;
}
4

4 に答える 4

5

div 内の画像のスタイルを に変更しdisplay:blockます。

元：

itemWrapper > img {
    display:block;
}
于 2013-09-03T12:13:28.083 に答える
1

CSS ファイルでは、パディング、マージン、ボーダーなどを追加します。次に、html ファイルですべてのクラスを使用します。

これは、問題を引き起こす div の 1 つかもしれません。すべてのクラスを含めることでパディングとその他のオフセットを追加しました。これにはすべての css クラスが含まれます。

CSS クラスには、オフセットのある #portfolio-sectionB パーツがあります。

それが何であるかわからない場合は、CSS ファイル内のすべての CSS プロパティをいつでもコメントアウトし、バグが再発するかどうかを確認しながら、それらを 1 つずつ有効にすることができます。

HTML コメントのスペルミスを修正します。Gird を Grid に変更します。

于 2013-09-03T12:18:22.700 に答える
1

imginline-lbock 要素およびainline 要素です。したがって、単純なテキストの空白がそれらの間に表示されます。

于 2013-09-03T12:14:24.363 に答える
0

これがあなたの言いたいことかどうかはわかりませんが、リンク自体にパディングがあるようです。これにより、画像の周りに白い境界線が表示されます。

于 2013-09-03T12:10:41.923 に答える