Jquery 将栅格元素自动显示在彼此下方
看,我正在这一页上工作,第一个是女性,第二个是男性:Jquery 将栅格元素自动显示在彼此下方,jquery,asp.net,html,css,Jquery,Asp.net,Html,Css,看,我正在这一页上工作,第一个是女性,第二个是男性: http://www.woolovers.com/cashmere-merino/womens/classic-ladies-crew-cardigan.aspx http://www.woolovers.com/lambswool/unisex/lambswool-slipover-vest.aspx 正如您所看到的,样例颜色栅格顶部的大小各不相同。男士(S M L XL XXL)和女士(S M L XL) aspx文件中该网格的htm
http://www.woolovers.com/cashmere-merino/womens/classic-ladies-crew-cardigan.aspx
http://www.woolovers.com/lambswool/unisex/lambswool-slipover-vest.aspx
正如您所看到的,样例颜色栅格顶部的大小各不相同。男士(S M L XL XXL)和女士(S M L XL)
aspx文件中该网格的html为:
<div class="SwatchGrid sw-color">
<div class="sw-item">
<asp:HyperLink ID="lnkColourURL" runat="server">
<asp:Image ID="imgSwatch" runat="server" Height="20px" Width="20px" BorderWidth="0" />
</asp:HyperLink><span><a id="hrfColourLink" runat="server" class="SwatchColourLabel ordr_grid">
<asp:Literal ID="lblColour" runat="server"></asp:Literal></a></span></div>
<div class="sw-sizes-av">
<div id="tdXs" runat="server" visible="false">
<span id="spXS" runat="server" visible="false">
<img id="imgXSarge<%=mstrXSID%>" src="<%=mstrXSURL%>" onclick="ImageClicked('imgXSarge',<%=mstrXSID%>,'<%=mstrXSMsg%>',<%=onXSWait %>)"
onmouseover="ImageOver(<%=mstrStyleID%>,<%=mstrXSSwatchID%>,<%=mstrColWay %>,'<%=ImagePath %>','<%=strAlt %>')"
onmouseout="ImageOut(<%=mstrColWay %>)" alt="<%=mstrXSTitle%>" title="<%=mstrXSTitle%>"
class="CurPointer" /></span>
</div>
<div id="tdS" runat="server" visible="false">
<span id="spS" runat="server" visible="false">
<img id="imgSmall<%=mstrSID%>" src="<%=mstrSURL%>" onclick="ImageClicked('imgSmall',<%=mstrSID%>,'<%=mstrSMsg%>',<%=onSWait %>)"
onmouseover="ImageOver(<%=mstrStyleID%>,<%=mstrSSwatchID%>,<%=mstrColWay %>,'<%=ImagePath %>','<%=strAlt %>')"
onmouseout="ImageOut(<%=mstrColWay %>)" alt="<%=mstrSTitle%>" title="<%=mstrSTitle%>"
class="CurPointer" /></span>
</div>
<div id="tdM" runat="server" visible="false">
<span id="spM" runat="server" visible="false">
<img id="imgMedium<%=mstrMID%>" src="<%=mstrMURL%>" onclick="ImageClicked('imgMedium',<%=mstrMID%>,'<%=mstrMMsg%>',<%=onMWait %>)"
onmouseover="ImageOver(<%=mstrStyleID%>,<%=mstrMSwatchID%>,<%=mstrColWay %>,'<%=ImagePath %>','<%=strAlt %>')"
onmouseout="ImageOut(<%=mstrColWay %>)" alt="<%=mstrMTitle%>" title="<%=mstrMTitle%>"
class="CurPointer" /></span>
</div>
<div id="tdL" runat="server" visible="false">
<span id="spL" runat="server" visible="false">
<img id="imgLarge<%=mstrLID%>" src="<%=mstrLURL%>" onclick="ImageClicked('imgLarge',<%=mstrLID%>,'<%=mstrLMsg%>',<%=onLWait %>)"
onmouseover="ImageOver(<%=mstrStyleID%>,<%=mstrLSwatchID%>,<%=mstrColWay %>,'<%=ImagePath %>','<%=strAlt %>')"
onmouseout="ImageOut(<%=mstrColWay %>)" alt="<%=mstrLTitle%>" title="<%=mstrLTitle%>"
class="CurPointer" /></span>
</div>
<div id="tdXL" runat="server" visible="false">
<span id="spXL" runat="server" visible="false">
<img id="imgXLarge<%=mstrXLID%>" src="<%=mstrXLURL%>" onclick="ImageClicked('imgXLarge',<%=mstrXLID%>,'<%=mstrXLMsg%>',<%=onXLWait %>)"
onmouseover="ImageOver(<%=mstrStyleID%>,<%=mstrXLSwatchID%>,<%=mstrColWay %>,'<%=ImagePath %>','<%=strAlt %>')"
onmouseout="ImageOut(<%=mstrColWay %>)" alt="<%=mstrXLTitle%>" title="<%=mstrXLTitle%>"
class="CurPointer" /></span>
</div>
<div id="tdXXXL" runat="server" visible="false">
<span id="spXXXL" runat="server" visible="false">
<img id="imgXXXLarge<%=mstrXXXLID%>" src="<%=mstrXXXLURL%>" onclick="ImageClicked('imgXXXLarge',<%=mstrXXXLID%>,'<%=mstrXXXLMsg%>',<%=onXXXLWait %>)"
onmouseover="ImageOver(<%=mstrStyleID%>,<%=mstrXXXLSwatchID%>,<%=mstrColWay %>,'<%=ImagePath %>','<%=strAlt %>')"
onmouseout="ImageOut(<%=mstrColWay %>)" alt="<%=mstrXXXLTitle%>" title="<%=mstrXXXLTitle%>"
class="CurPointer" /></span></div>
<div id="tdXXL" runat="server" visible="false">
<span id="spXXL" runat="server" visible="false">
<img id="imgXXLarge<%=mstrXXLID%>" src="<%=mstrXXLURL%>" onclick="ImageClicked('imgXXLarge',<%=mstrXXLID%>,'<%=mstrXXLMsg%>',<%=onXXLWait %>)"
onmouseover="ImageOver(<%=mstrStyleID%>,<%=mstrXXLSwatchID%>,<%=mstrColWay %>,'<%=ImagePath %>','<%=strAlt %>')"
onmouseout="ImageOut(<%=mstrColWay %>)" alt="<%=mstrXXLTitle%>" title="<%=mstrXXLTitle%>"
class="CurPointer" /></span>
</div>
</div>
<div class="cls">
</div>
</div>
<%}
else
{ %>
<%--<div class="sw-item1"> </div>--%>
<div class="sw-sizes">
<div id="tdHXS" runat="server" visible="false">
<span id="spHXS" runat="server" visible="false" >
<asp:Literal ID="Literal1" runat="server" Text="<%$Resources:common,Size_XS%>"></asp:Literal></span></div>
<div id="tdHS" runat="server" visible="false">
<span id="spHS" runat="server" visible="false" >
<asp:Literal ID="Literal2" runat="server" Text="<%$Resources:common,Size_S%>"></asp:Literal></span></div>
<div id="tdHM" runat="server" visible="false">
<span id="spHM" runat="server" visible="false" >
<asp:Literal ID="Literal3" runat="server" Text="<%$Resources:common,Size_M%>"></asp:Literal></span></div>
<div id="tdHL" runat="server" visible="false">
<span id="spHL" runat="server" visible="false" >
<asp:Literal ID="Literal4" runat="server" Text="<%$Resources:common,Size_L%>"></asp:Literal></span></div>
<div id="tdHXL" runat="server" visible="false">
<span id="spHXL" runat="server" visible="false" >
<asp:Literal ID="Literal5" runat="server" Text="<%$Resources:common,Size_XL%>"></asp:Literal></span></div>
<div id="tdHXXXL" runat="server" visible="false">
<span id="spHXXXL" runat="server" visible="false">
<asp:Literal ID="Literal7" runat="server" Text="<%$Resources:common,Size_XXXL%>"></asp:Literal></span></div>
<div id="tdHXXL" runat="server" visible="false">
<span id="spHXXL" runat="server" visible="false">
<asp:Literal ID="Literal6" runat="server" Text="<%$Resources:common,Size_XXL%>"></asp:Literal></span></div>
</div>
<% } %>
onclick=“ImageClicked('imgXSarge','',)”
onmouseover=“ImageOver(,,,,,,,,“”)”
onmouseout=“ImageOut()”alt=”“title=“”
class=“CurPointer”/>
onclick=“ImageClicked('imgSmall','',)”
onmouseover=“ImageOver(,,,,,,,,“”)”
onmouseout=“ImageOut()”alt=”“title=“”
class=“CurPointer”/>
onclick=“ImageClicked('imgMedium','',)”
onmouseover=“ImageOver(,,,,,,,,“”)”
onmouseout=“ImageOut()”alt=”“title=“”
class=“CurPointer”/>
onclick=“ImageClicked('imgLarge','',)”
onmouseover=“ImageOver(,,,,,,,,“”)”
onmouseout=“ImageOut()”alt=”“title=“”
class=“CurPointer”/>
onclick=“ImageClicked('imgXLarge','',)”
onmouseover=“ImageOver(,,,,,,,,“”)”
onmouseout=“ImageOut()”alt=”“title=“”
class=“CurPointer”/>
onclick=“ImageClicked('imgXXXLarge','',)”
onmouseover=“ImageOver(,,,,,,,,“”)”
onmouseout=“ImageOut()”alt=”“title=“”
class=“CurPointer”/>
onclick=“ImageClicked('imgXXLarge','',)”
onmouseover=“ImageOver(,,,,,,,,“”)”
onmouseout=“ImageOut()”alt=”“title=“”
class=“CurPointer”/>
现在的问题是,产品上可能有随机尺寸(从小尺寸到三倍XL(XXXL))。在这种情况下,有4个尺寸(S/M/L/XL)。现在,如果黑色上没有M尺寸,则S尺寸的黑色图像会向右移动(因为.sw尺寸av具有宽度:自动)。如何在不将其放入表格布局的情况下保留该图像和任何其他图像?我希望您理解我在这里要说的内容。首先,删除
<div id="ctl00_ContentPlaceHolder1_SwatchGrid1_swl11_tdXXXL">
</div>
附加相关html的屏幕截图
图像将位于此span标记内?在aspx中,不完全可用的尺寸设置为visible=false,仅供参考。否。如果尺寸不可用,则不会有图像标记。并将其与css结合。详细说明。您仍然有4个span标记,所有这些标记都具有上述css。但其中只有1个没有标记。@Harmeet您将visible=false设置为什么?图像出现的div和span标记。@Harmeet我在Chrome浏览器中看到了代码,我看到span不在那里,但是div标记在那里……还有一些额外的div标记……为什么会这样?我正在查看您附加的第二个链接。
<div id="ctl00_ContentPlaceHolder1_SwatchGrid1_swl11_tdXs">
</div>
.content-size{
width:20px; /* because your span has 2px margin */
height:18px;
}