0

Joomla、Phoca Gallery Image Component、PhocaCalleryモジュールを使用しています。それは実際にはJoomlaについての質問ではなく、CSSについての質問です。プラグインは4つの画像でギャラリーを作成します。これらの画像は、float：leftを使用して2x2グリッドを作成する必要があります。

結果は次のとおりです。http： //jsfiddle.net/qAx7c/ （元のリンク： http： //renathy.woano.lv/index.php/lv/par-mums-2）

.block {        
border:1px solid  #342e2b;
border-radius:7px;
padding: 12px 22px 12px 22px;
}

.block-box2 div.content-main {
  width:50%;
  display:inline-block;
 float:left; 
}

.block-box2 div.content-sidebar2 {
  width:49.99%;
  float:right;    
 }

/* float clearing for IE6 */
 * html .clearfix{
 height: 1%;
   overflow: visible;
}

 /* float clearing for IE7 */
 *+html .clearfix{
  min-height: 1%;
 }

/* float clearing for everyone else */
 .clearfix:after{
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  font-size: 0;
 }

/* FIXes */
#phocagallery-module-ri .phocagallery-box-file {
padding: 0 !important;
background: none !important;    
}

#phocagallery-module-ri .phocagallery-box-file-first {
   background: none !important;   
} 

#phocagallery-module-ri {
    margin-left: 40px !important;
}

#phocagallery-module-ri div.mosaic a img {
    border: 1px solid #342e2b !important;
    /*border: none !important;*/
}

 #phocagallery-module-ri div.mosaic a img, #phocagallery-module-ri div.mosaic img {
    -webkit-box-shadow: none !important;   
box-shadow: none !important;
}

<div class="block block-box2 clearfix">            
<div class="content-main">
    <div class="item-page">
        <h2>Par mums</h2>

        Some text here 
                Some text here  
    </div>
</div>
<div class="content-sidebar2">            
    <div id="phocagallery-module-ri" style="text-align:center;">
        <center style="padding:0px;margin:0px;">
            <div class="mosaic" style="float:left;padding:5px;width:170px">
                <a class="modal-button" title="Atmosfēra" href="">
                    <img src="phoca_thumb_m_parmums_telpas.jpg" alt="Atmosfēra" width="170" height="150">
                </a>
            </div>

            <div class="mosaic" style="float:left;padding:5px;width:170px">
                <a class="modal-button" title="Par mums" href="#">
                    <img src="phoca_thumb_m_parmums_atmosfera.jpg" alt="Par mums" width="170" height="149">
                </a>
            </div>

            <div class="mosaic" style="float:left;padding:5px;width:170px">
                <a class="modal-button" title="Par mums" href="#">
                    <img src="phoca_thumb_m_parmums_dzerieni.jpg" alt="Par mums" width="170" height="150">
                </a>
            </div>

            <div class="mosaic" style="float:left;padding:5px;width:170px">
                <a class="modal-button" title="Par mums ārpusē" href="#">
                    <img src="phoca_thumb_m_parmums_izskats.jpg" alt="Par mums ārpusē" width="170" height="150">
                </a>
            </div>
        </center>
    </div>
    <div style="clear:both"></div>    
</div>

ご覧のとおり、1つの画像が正しく浮かんでいません。divphocagallery-module-riのコードは自動的に生成されます。画像とdivの幅、マーリング、パディングを変更しようとしましたが、何の役にも立ちません。1つの画像が正しく浮いていないのですが、すべて問題ないようです。どうしてこの浮きが壊れているのか、アイデアを教えてください。

4

2 に答える 2

1

最初の画像のコードは次のとおりです。

<img src="/images/phocagallery/par_mums/thumbs/phoca_thumb_m_parmums_telpas.jpg" alt="Atmosfēra" width="170" height="150">

そして、2番目の画像のコードは次のとおりです。

<img src="/images/phocagallery/par_mums/thumbs/phoca_thumb_m_parmums_atmosfera.jpg" alt="Par mums" width="170" height="149">

それらは異なる高さ（150と149）を持っています、これが理由です。

2番目の画像の高さをに変更する150と正常に機能します。

于 2013-02-07T15:16:14.093 に答える
0

問題は、2番目の画像の高さが最初の画像よりも低いことです。したがって、2番目は最初の隣に浮きますが、3番目も最初に左に浮き、ギャップを残します。4番目のものは3番目の隣に収まらないため、新しい行に折り返されます。

それが原因です。さて、このソリューションについては、私はCSSの専門家ではないので、次のソリューションのどれが最適か、また別のより良いソリューションがあるかどうかもわかりません。

1つの解決策は、高さが固定されているか、少なくとも各画像の高さが同じであるコンテナに各画像を埋め込むことです。

他の可能な解決策は、CSSテーブルのスタイル設定方法を使用することです。第3に、2番目の画像の後に要素を追加するとclear:both（1行に2つしか必要ないため）、フローティングが壊れます。

サイトの性質とギャラリー内の写真を考慮して、各サムネイル画像を同じサイズにすることもできます。それはまた、問題の引き金を取り除くことによって、それを解決します。

于 2013-02-07T15:14:17.407 に答える