Макет выдвигается из-за описания - PullRequest
Новая
       6

Макет выдвигается из-за описания

1 голос
/ 21 июля 2009

Я использую элемент управления DataList, чтобы показывать три продукта на линию по горизонтали. Но есть проблема с макетом, и он выталкивает элемент контейнера изображения продукта, как показано ниже:

Проблема с макетом списка данных http://www.pixelshack.us/images/wwmlzkvhxsr7b2l0ptcl.jpg

Вот код: 

  <asp:DataList ID="dlProducts" runat="server" RepeatColumns="3" RepeatLayout="Table"
                DataSourceID="ObjectDataSourceCategories" RepeatDirection="Horizontal" CellSpacing="10" CellPadding="0" HorizontalAlign="Center" ItemStyle-Wrap="true">
                <ItemTemplate>

                        <a href='<%# "Items.aspx?catId=" + (string)Eval("id") %>'>
                            <asp:Image ID="Image1" CssClass="photo-border photo-float-left" runat="server" Width="165px"
                                Height="120px" ImageUrl='<%# "ProductImages/Thumbnails/" + (string)Eval("ImageUrl") %>'
                                AlternateText='<%#(string)Eval("ImageAltText")%>' /></a>
                        <br />
                        <asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl='<%# "Items.aspx?catId=" + (string)Eval("id") %>'
                            Text='<%# Eval("Title").ToString()%>' Font-Bold="true" />
                </ItemTemplate>
            </asp:DataList>

Как мне справиться с проблемой?

Заранее спасибо.

Ответы [ 2 ]

2 голосов
/ 21 июля 2009

У меня была похожая проблема. В итоге мне пришлось разбить связанное изображение и текст на их собственный div и стилизовать их соответственно: 

<ItemTemplate>
    <div class="outer">
        <div class="top">
            <asp:HyperLink id="hlImage" runat="server" CssClass="Font7">
            </asp:HyperLink>
        </div>
        <div class="bottom">
            <asp:Label id="lbText" runat="server" CssClass="Font7"></asp:Label>
        </div>
    </div>
</ItemTemplate>

Я уверен, что есть более чистые способы сделать это, и это всего лишь пример того, как может выглядеть вывод HTML. Это просто «не с руки», но если вы вставите пустой htm-файл, он будет отображаться. 

<div style="width: 100px;">
    <!-- first row -->
    <div style="float:left; width:50px; border: 2px solid black;">
        <div>
            <a href="#">link</a>
        </div>
        <div style="height:50px; background-color:Aqua; vertical-align:bottom;">
            <span>text</span>
        </div>
    </div>
    <div style="float:left; width:50px; border: 2px solid black;">
        <div>
            <a href="#">link</a>
        </div>
        <div style="background-color: Aqua;">
            <span style="height:50px; vertical-align:bottom;">text</span>
        </div>
    </div>
    <!-- second row -->
    <div style="float:left; width:50px; border: 2px solid black;">
        <div>
            <a href="#">link</a>
        </div>
        <div style="height:50px; background-color:Aqua; vertical-align:bottom;">
            <span>text</span>
        </div>
    </div>
</div>

Скорее всего, вы можете использовать RepeatLayout = "Flow" ItemStyle = "float: left;" в вашем контроле DataList, чтобы помочь, а.

0 голосов
/ 21 июля 2009

Я не совсем уверен, как это исправить, но я бы начал с помещения каждого элемента в <div> или <span> и использовал бы классы CSS вместо стиля элемента управления. E.g.:

<Item Template>
  <div class="myClass">...</div>
</Item Template>

Использование этого с Firebug для отладки обычно проще, чем выяснение того, как вы нарушаете высоту элемента управления и т. Д.

...