0
私はイメージとハイパーリンクを上下に持つリピータコントロールを持っています。複数のテキスト行を追加するたびに、テキストがイメージコントロールを押し上げます。画像の上端を水平に整列させ、テキストが1行以上ある場合には下向きになるようにします。 にご相談ください。ここでリピータコントロールのアイテムテンプレート内のコントロールを整列させますか?
私が使用しているASCXコードです:
<asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
<asp:View ID="View1" runat="server">
<asp:UpdatePanel ID="UpdatePanelAnnouncements" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<table>
<tr>
<asp:Repeater ID="repAnnouncements" runat="server">
<ItemTemplate>
<td style="padding-right:19px; padding-top:1px; padding-left:7px;">
<asp:HiddenField ID="ItemID" Value='<%#Eval("ID") %>' runat="server" />
<asp:HyperLink ID="hypImageEditLink" runat="server">
<div class="ImageStyle" >
<asp:Image ID="imgLink" Height="110px" Width="150px" runat="server" ImageUrl='<%#Eval("Images")%>' CssClass ="magnify"/>
</div>
</asp:HyperLink>
<br/><br/>
<div id="div3" class="Div3"><asp:HyperLink ID="hypTextEditLink" runat="server" Text='<%#Eval("Title")%>' CssClass="TitleStyle"/></div>
</td>
</ItemTemplate>
</asp:Repeater>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</asp:View>
そしてここでは、スタイルシートである:
.div3
{
width: 150px !important;
display:inline !important;
/*display: -moz-inline-box !important;
display: inline-block !important; */
float:left !important;
}
.ImageStyle
{
margin-left:8px;
/* Width:150px !important; Height:110px !important;
box-shadow: 0px 0.5px 35px 15px #888888;*/
border-collapse: separate !important;
box-shadow: 0px 0.5px 11px 4px #888888;
/*box-shadow: 0px 0.5px 11px 4px rgb(150,150,150);*/
}
.ImageStyle:hover
{
opacity:0.5 !important;
filter: alpha(opacity=50) !important;
border-color:blue !important;
border-width:thick !important;
}
パーフェクト!ありがとう、トン。 – user1266515