Question

我正在使用Joomla，Phoca Gallery Image Component和Phoca Callery module。这不是关于Joomla的问题，而是关于CSS的问题。插件创建了4个图像的图库。这些图像应使用float：left创建2 x 2网格。

以下是我的结果： 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>

如您所见，一张图片未正确浮动。 div phocagallery-module-ri的代码是自动生成的。我试图改变图像和div的宽度，行进，填充，但没有任何帮助 - 一个图像浮动不正确，但似乎一切都应该没问题。请你能给我一些想法，为什么这个浮动被破坏了？

Answer 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将正常工作。

Answer 2

问题是第二张图片不如第一张图片高。因此，第二个浮动在第一个旁边，但第三个也浮动到第一个，留下一个空隙。第四个不适合第三个，所以它包装到一个新的行。

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

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

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

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

浮动图像2 x 2

2 个答案: