將圖像對齊到底部div

Question

我在面板中有一個div。我爲此添加一個圖像。

我希望將圖像對齊到DIV容器的底部。（顯示圖象的線。）

<asp:Repeater ID="product" runat="server"> 
    <ItemTemplate> 
     <div style="float: right; width: 180px; height: 177px; margin: 0 30PX 10px 5px"> 
     <asp:Panel ID="Panel1" runat="server"> 
      <font color="white"> 
      <asp:Label ID="Label1" runat="server" Text='<%# Eval("Name") %>'></asp:Label></font> 
      <br /> 
      <div style="height:140px ; overflow:hidden"> 
       <asp:Image ID="Image1" runat="server" Width="120px" ImageUrl='<%# Eval("Image") %>' ImageAlign="Bottom" /> 
      </div> 
     </asp:Panel> 
    </div> 
    </ItemTemplate> 

Answer 1

不要依賴於ASP ImageAlign財產。使用CSS，如：

<div style="float: right; width: 180px; height: 177px; margin: 0 30px 10px 5px; position:relative"> 
    <div id="panel" 
     <label>Name</label> 
     <img id="Image1" src='img-url-goes-here' style="position:absolute;bottom:0px;height:40px;display:block;" /> 
    </div> 
</div>​ 

在你的代碼，這將是：

<div style="float: right; width: 180px; height: 177px; margin: 0 30px 10px 5px;"> 
    <asp:Panel ID="Panel1" runat="server"> 
     <font color="white"> 
      <asp:Label ID="Label1" runat="server" Text='<%# Eval("Name") %>'></asp:Label>  
     </font> 
     <div style="overflow:hidden;height:140px; position:relative;"> 
      <asp:Image ID="Image1" runat="server" Width="120px" ImageUrl='<%# Eval("Image") %>' style="position:absolute; bottom:0px; height:40px; display:block;" /> 
     </div> 
    </asp:Panel> 
</div> 

Answer 2

使用vertical-align:bottom在圖像DIV

<asp:Repeater ID="product" runat="server"> 
     <ItemTemplate> 
      <div style="float: right; width: 180px; height: 177px; margin: 0 30PX 10px 5px"> 
      <asp:Panel ID="Panel1" runat="server"> 
       <font color="white"> 
       <asp:Label ID="Label1" runat="server" Text='<%# Eval("Name") %>'></asp:Label></font> 
       <br /> 
       <div style="height:140px ; overflow:hidden; vertical-align:bottom"> 
        <asp:Image ID="Image1" runat="server" Width="120px" ImageUrl='<%# Eval("Image") %>' ImageAlign="Bottom" /> 
       </div> 
      </asp:Panel> 
     </div> 
     </ItemTemplate> 
    </asp:Repeater>