浮动图像2 x 2
我正在使用Joomla，Phoca Gallery图像组件和Phoca Callery module。这不仅仅是关于Joomla的问题，而是关于CSS的问题。插件创建具有4个图像的图库。这些图像应该创建2 x 2网格，使用float:left。
这是我得到的结果：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的填充，但没有任何帮助-一个图像不正确地浮动，然而似乎一切都应该是好的。你能，请，给我一些想法，为什么这个浮动是坏的？
回答 2
Stack Overflow用户
发布于 2013-02-07 23:16:14
第一张图片的代码是：
<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会很好地工作。
Stack Overflow用户
发布于 2013-02-07 23:14:17
问题是第二张图片比第一张图片要低一些。因此，第二个浮动在第一个之后，但第三个也会向左浮动到第一个，留下一个间隙。第四个不适合放在第三个旁边，所以它换成了一个新行。
所以这就是原因。现在，对于解决方案，我不是CSS专业人员，所以我不能说以下哪一个解决方案是最好的，也不知道是否有另一个更好的解决方案。
一种解决方案是将每个图像嵌入到具有固定高度的容器中，或者至少每个图像具有相同的高度。
其他可能的解决方案是使用CSS表的样式方式。第三，在每隔一张图片后添加一个clear:both元素(因为您只想在一行中添加两个)将打破浮点数。
考虑到网站的性质和图库中的图片，您还可以选择使每个缩略图图像的大小相同。这也将解决它，通过去除问题的触发因素。
https://stackoverflow.com/questions/14754397
复制相似问题
腾讯云开发者
