Question

我希望有人可以帮助我！我的图像在FF和Chrome中垂直显示而不是水平显示，但在IE中完全（水平）显示。我知道html有点，而且很少关于css属性，所以我有一个时间试图解决这个问题的恶魔。经过几个月的搜索论坛，我得出结论，我所遇到的问题与“宽度”属性，我添加到网站的jquery手风琴菜单或两者都有关。在我为手风琴菜单插入html和css后问题就出现了。您可以在此处查看示例（使用FF或Chrome浏览器）：Spring Creek Rustic Outfitters

有问题的代码的HTML部分：

<table border="0" cellspacing="0" cellpadding="0">
<tr>
    <td valign="top">
    <ss:if test="$product.defaultImage"> 
        <table border="0" cellspacing="0" cellpadding="0" id="imgtable" rules="none">
            <tr>
                <td valign="middle" align="center" width="100%" height="100%" id="divMediumContainer">
                    <ss:set name="item" value="$product.defaultImage"/>

                    <ss:if test="$item.hasMediumSize()">
                            <ss:set name="urlMedium" value="$item.medium"/>
                    <ss:else/>
                            <ss:set name="urlMedium" value="$item.small"/>
                    </ss:if>

                    <ss:image id="imgMedium" source="$urlMedium" title="$item.title" class="click"/>         
                </td>
            </tr>
        </table>

        <br />

        <ss:foreach item="productMedia" within="$product.images">
            <ss:if test="$counter.totalRows > 1">
                <ss:set name="item" value="$productMedia.storeMediaItem"/>
                <ss:if test="$item.hasSmallSize()">
                    <div style="padding:2px 2px 2px 2px"><div id="$system.concat('divSmallImage_', $counter.currentRow)" class="imagesmallcontainer">
                        <ss:image id="$system.concat('imgSmall_', $counter.currentRow)" source="$item.getImage('small')" calcoffset="65"/>
                    </div></div>
                    <ss:if test="$counter.isLast">
                        <div class="hoverover">
                            <ss:image source="$storeVersion.images['hoverOver.gif']"/>
                        </div>  
                    </ss:if>
                </ss:if>
            </ss:if>
        </ss:foreach>
    <ss:else/>
        <div class="notavailable">
            <div style="padding:50px">Photo Not Available</div>
        </div>
    </ss:if>
</td>

代码的CSS部分：

/****** MULTIPLE IMAGES ****** product detail page */
.click {cursor:pointer}
.imagesmallcontainer {
    background-color:#ffffff;
border:2px solid #CCCCCC;
display:inline-block;
height:65px;
margin:4px 4px 2px 0px;
overflow:hidden;
width:65px;
    position: relative;
}
.hoverover {
display:inline-block;
font-size:11px;
padding-bottom:2px;
padding-top:2px;
    position: relative;
}
.notavailable {
background-color:#ffffff;
border:1px solid #cccccc;
color:#666666;
padding:10px;
text-align:center;
}

由于我正在使用来自虚拟主机的模板，我不确定是否有人可以提供帮助...但我认为值得一试。

提前致谢，马西

Answer 1

对于 .imagesmallcontainer 元素或其中的 img 标记，请使用Float:left。它会起作用。

在FF＆amp ;;中，图像垂直显示而不是水平显示。铬

1 个答案: