html - float 图像 2 x 2

Question

我正在使用 Joomla，Phoca Gallery图像组件和 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>            

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

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 即可。