浮動圖像2 x 2

我正在使用Joomla，Phoca Gallery圖像組件和Phoca Callery module。這不是關於Joomla的問題，而是關於CSS的問題。插件創建4個圖像的畫廊。這些圖像應該創建2 x 2網格，使用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的代碼是自動生成的。我試圖改變寬度，marings，填充的圖像和divs，但沒有任何幫助 - 一個圖像浮動不正確，但似乎一切都應該罰款。您能否給我一些想法，爲什麼這個浮動被打破了？

來源

2013-02-07 renathy

第一圖像的代碼是：

<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-07 15:16:14 pktangyue

問題在於第二張圖像比第一張圖像小。因此，第二個漂浮在第一個旁邊，但第三個漂浮在第一個左側，留下一個間隙。第四個不適合第三個，所以它換行。

所以這就是原因。現在爲解決方案，我不是一個CSS專業人員，所以我不能說下列哪種解決方案是最好的，也不能說是另一種更好的解決方案。

一個解決方案是將每個圖像嵌入到具有固定高度的容器中，或者每個圖像至少具有相同的高度。

其他可能的解決方案是使用CSS表格樣式。第三，在每秒圖像之後添加一個clear:both元素（因爲您只需要兩行）會打破浮動。

鑑於網站的性質和圖庫中的圖片，您也可以選擇使每個縮略圖圖像的大小相同。這也將解決它，通過消除問題的觸發。

來源

2013-02-07 15:14:17 GolezTrol

回答

相關問題