在 IE 中连续显示 3 张图像的问题答案

【问题标题】：problem in showing 3 images in a row In IE在 IE 中连续显示 3 张图像的问题
【发布时间】：2010-02-05 17:37:33
【问题描述】：

嘿，伙计们，这是我用来连续显示 3 张图像的代码

在 FF 中一切正常，但在 IE 中却不行

还有我的代码：

echo "<div class=\"container mod\"><ul id=\"three-col\" class=\"press\">";

while($cat = $db->sql_fetchrow($catinfo)) {

$counter++; 

echo '
<li>
<div class="post-content">
        <a class="zoom1">
        <img src="'.$galsettings[setImgDir].'/'.$cat[galCatLocation].'/'.$cat[galCatImg].'" alt="'.$cat[galCatName].'" />
        </a>
        </div>
        <span class="post-bottom"></span>           
        <div class="meta">
        <p>'.$cat[galCatName].'</p>';

        echo ' </div>';

        echo '</li>';

if ( $counter == 3 ) { 
echo '<ul>'; 
$counter = 0; 
} 
}

echo "</ul></div>";

【问题讨论】：

标签： html css internet-explorer

【解决方案1】：

在 Internet Explorer 中，第二行被前一行的高度变化所吸引。您可以通过两种方式解决此问题：

在“#three-col li”的样式规则中还要说明高度：

#three-col li {
  background:url("../img/bg-post-top.png") no-repeat scroll 0 0 transparent;
  float:left;
  height:312px;
  margin:3em 20px 0 0;
  overflow:hidden;
  padding-top:20px;
  position:relative;
  width:300px;
}

您可以添加一个元素来清除行之间的间隙。

我想你可能已经尝试过了，但是一个很好的方法是：

  ...
</ul>
<div style="clear: both;">&nbsp;</div>
<ul>
  ...

【讨论】：

【解决方案2】：

我发现了问题

在while循环结束后移动那个条件语句一切都很好

echo "<div class=\"container mod\"><ul id=\"three-col\" class=\"press\">";

while($cat = $db->sql_fetchrow($catinfo)) {

echo '
        <li>

        echo '</li>';


}
if ( $counter == 3 ) { 
echo '</ul> 
<div style="clear: both;">&nbsp;</div> 
<ul id=\"three-col\"> '; 
$counter = 0; 
} 
echo "</ul></div>";

感谢 Sohnee 的出色回答

【讨论】：

【解决方案3】：

尝试将此 css 放入您的文件中：

div.post-content {display:inline;}
div ul li {display:inline;}

【讨论】：