0

I am using Joomla, Phoca Gallery Image Component and Phoca Callery module. It is not actaully the question about Joomla, but about CSS. Plugin creates gallery with 4 images. Those images should create 2 x 2 grid, using float:left.

Here is what I have as a result: http://jsfiddle.net/qAx7c/ (original link: 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>

As you see, one image is not floating correctly. The code of div phocagallery-module-ri is generated automatically. I tried to change width, marings, paddings of images and divs, but nothing helps - one image is floating incorrectly, however it seems that everything should be fine. Can you, please, give me some ideas, why this floating is broken?

4

2 回答 2

1

第一张图片的代码是：

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

第二张图片的代码是：

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

他们有不同的高度（ 150 和 149 ），这就是原因。

将第二个图像的高度更改为150将可以正常工作。

于 2013-02-07T15:16:14.093 回答
0

问题是第二张图片没有第一张高。因此，第二个浮动在第一个旁边，但第三个也浮动到第一个左侧，留下一个间隙。第四个不适合第三个，所以它换行。

所以这就是原因。现在对于解决方案，我不是 CSS 专业人士，所以我不能说以下哪种解决方案是最好的，也不能说是否有另一种更好的解决方案。

一种解决方案是将每个图像嵌入一个具有固定高度的容器中，或者至少每个图像具有相同的高度。

其他可能的解决方案是使用 CSS 表格样式。第三，clear:both在每第二张图片之后添加一个元素（因为你只想要一行中的两个）会破坏浮动。

鉴于网站的性质和图库中的图片，您还可以选择使每个缩略图图像大小相同。这也将通过消除问题的触发器来解决它。

于 2013-02-07T15:14:17.407 回答