jquery - 自动在彼此下方显示网格元素

Question

看到我在这个页面上工作，第一个是女性，第二个是男性:

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">&nbsp;</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>
<% } %>

现在的问题是，产品可以提供随机尺寸(从小号 (S) 到 Triple XL (XXXL))。在本例中有 4 个 (S/M/L/XL)。现在，如果黑色上没有 M 尺寸，则黑色的 S 尺寸图像会向右移动(因为 .sw-sizes-av 具有 width:auto )。如何在不将其放入表格布局的情况下将其和任何其他图像保留在其位置？我希望你明白我在这里想说的。

Answer 1

首先，删除

<div id="ctl00_ContentPlaceHolder1_SwatchGrid1_swl11_tdXXXL">
        </div>

和

<div id="ctl00_ContentPlaceHolder1_SwatchGrid1_swl11_tdXs">   
    </div>

如果不需要的话。我看到 header 只有 S、M、L、XL、XXL，但有 7 个不同的 <div> . XS、S、M、L、XL、XXL、XXXL。如果您没有相应的 header ，请不要使用 div。

其次，所有可能/可能没有可用尺寸的 div 都应该有一个类..让我们创建这个类 content-size .

您需要将以下 css 添加到此类中

.content-size{
width:20px; /* because your span has 2px margin */
height:18px;
}

附上相关html的截图