2015-04-13 3 views
0

Я пытаюсь установить элементы из моего каталога данных рядом. Предметы на данный момент появляются бок о бок, а второй - примерно на 30 пикселей ниже первого, а третий примерно на 30 пикселей ниже второго. Любые идеи, как заставить их сглаживать горизонтально красивым способом?Элементы в datalist как бок о бок

Мой стиль:

.wrapping { 
    float: left; 
    border-width: 2px; 
    border-style: dashed; 
} 
    #boxer { 
    /* basic */ 
    background-color: #fff; 
    margin: 10px; 
    padding: 60px; 
    text-align: center; /* border-radius */ 
} 

Мой список:

<asp:DataList ID="myDataList" runat="server" BorderColor="Black" CellPadding="5" CellSpacing="5" RepeatLayout="Flow"> 
    <ItemTemplate> 
    <div class="wrapping"> 
     <div id="boxer" > 
       <asp:Image ID="Image1" runat="server" ImageUrl='<%# "~/images/topimages/" & Eval("ImageName") %>' cssclass="topimage" /> 
       <br /><br /> 
       ProductID:<asp:Label ID="ProductIDLabel" runat="server" Text='<%# Eval("ProductID") %>' /> 
       <br />Name:<asp:Label ID="NameLabel" runat="server" Text='<%# Eval("ProductName")%>' /> 
       <br /> 
     </div> 
    </div> 
    </ItemTemplate> 
</asp:DataList> 
+0

Вы пытались дать '.wrapping'' vertical-align: top; '? – Paul

+0

@Paul да, это была моя первая мысль, но не работала. – alwaysVBNET

+1

Я поместил ваш код в JSfiddle, у меня не возникла проблема, поэтому он, вероятно, не имеет никакого отношения к коду, который вы предоставили. http://jsfiddle.net/okn6z26a/ – Maharkus

ответ

0

После того как я добавил RepeatDirection="Horizontal" в DataList он работал, как ожидалось.

Смежные вопросы