代码:
<%@ Page Language=http://www.mamicode.com/"C#" AutoEventWireup=http://www.mamicode.com/"true" CodeFile=http://www.mamicode.com/"Default.aspx.cs" Inherits=http://www.mamicode.com/"_Default" %> <!DOCTYPE html> <html xmlns=http://www.mamicode.com/""> <head runat=http://www.mamicode.com/"server"> <meta http-equiv=http://www.mamicode.com/"Content-Type" content=http://www.mamicode.com/"text/html; charset=utf-8" /> <title></title> <style> * { margin: 0px; padding: 0px; } #header { position: relative; width: 100%; height: 80px; background-color: aqua; } #footer { position: relative; width: 100%; height: 150px; background-color: #e0e0e0; } #items { position: relative; width: 90%; margin-left: 5%; border: 1px solid yellow; } .item { position: relative; float: left; width: 19%; height: 300px; margin: 10px 0.5%; background-color: green; } .item img { position: relative; width: 100%; /*width: 200px;*/ /*margin:5px 1%;*/ } .item div { position:relative; width:96%; margin:4px 2%; } </style> </head> <body> <form id=http://www.mamicode.com/"form1" runat=http://www.mamicode.com/"server"> <div id=http://www.mamicode.com/"header"></div> <div id=http://www.mamicode.com/"items"> <asp:Repeater ID=http://www.mamicode.com/"Repeater1" runat=http://www.mamicode.com/"server"> <ItemTemplate> <div class=http://www.mamicode.com/"item"> <img src=http://www.mamicode.com/"<%#Eval("pic") %>" /> <div>品种:<%#Eval("name") %></div> <div>现价:<%#Eval("nowprice") %></div> <div>原价:<%#Eval("oldprice") %></div> <div>简述:<%#Eval("context") %></div> </div> </ItemTemplate> </asp:Repeater> <div style=http://www.mamicode.com/"clear: both;"></div> </div> <div id=http://www.mamicode.com/"footer"></div> </form> </body> </html>
后台代码重点:(李献策lxc)
在流式布局中,流式div是不占有位置的,所以要用 “<div></div>” 撑起位置(李献策lxc)
=======================================================
ItemCommand的用法:
在DataList中生成事件时的激发。
前台代码:
<%@ Page Language=http://www.mamicode.com/"C#" AutoEventWireup=http://www.mamicode.com/"true" CodeFile=http://www.mamicode.com/"Default.aspx.cs" Inherits=http://www.mamicode.com/"_Default" %> <!DOCTYPE html> <html xmlns=http://www.mamicode.com/""> <head runat=http://www.mamicode.com/"server"> <meta http-equiv=http://www.mamicode.com/"Content-Type" content=http://www.mamicode.com/"text/html; charset=utf-8" /> <title></title> <style> * { margin: 0px; padding: 0px; } #header { position: relative; width: 100%; height: 80px; background-color: aqua; } #footer { position: relative; width: 100%; height: 150px; background-color: #e0e0e0; } #items { position: relative; width: 90%; margin-left: 5%; border: 1px solid yellow; } .item { position: relative; float: left; width: 19%; height: 300px; margin: 10px 0.5%; background-color: green; } .item img { position: relative; width: 100%; /*width: 200px;*/ /*margin:5px 1%;*/ } .item div { position:relative; width:96%; margin:4px 2%; } </style> </head> <body> <form id=http://www.mamicode.com/"form1" runat=http://www.mamicode.com/"server"> <div id=http://www.mamicode.com/"header"></div> <div id=http://www.mamicode.com/"items"> <asp:Repeater ID=http://www.mamicode.com/"Repeater1" runat=http://www.mamicode.com/"server"> <ItemTemplate> <div class=http://www.mamicode.com/"item"> <img src=http://www.mamicode.com/"<%#Eval("pic") %>" /> <div>品种:<%#Eval("name") %></div> <div>现价:<%#Eval("nowprice") %></div> <div>原价:<%#Eval("oldprice") %></div> <div>简述:<%#Eval("context") %></div> <asp:Button ID=http://www.mamicode.com/"Button1" runat=http://www.mamicode.com/"server" CommandName=http://www.mamicode.com/"Update" CommandArgument=http://www.mamicode.com/‘<%#Eval("ids") %>‘ Text=http://www.mamicode.com/"修改" /> <asp:Button ID=http://www.mamicode.com/"Button2" runat=http://www.mamicode.com/"server" CommandName=http://www.mamicode.com/"Delete" CommandArgument=http://www.mamicode.com/‘<%#Eval("ids") %>‘ Text=http://www.mamicode.com/"删除" /> </div> </ItemTemplate> </asp:Repeater> <div style=http://www.mamicode.com/"clear: both;"></div> </div> <div id=http://www.mamicode.com/"footer"></div> </form> </body> </html>
前台代码后台代码: