我在面板中有一个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>
答案 0 :(得分: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>
答案 1 :(得分:0)
在图片div中使用vertical-align:bottom
<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>