<title></title>
<link href="css/css1.css" rel="stylesheet" /> 导入css样式表
</head>
<body>
<form id="form1" runat="server">
<div id="top"></div>
<div id="main">
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<div class="item">
<%#Eval("UserName") %>>
<%#Eval("Password") %>>
<%#Eval("NickName") %>>
</div>
</ItemTemplate>
</asp:Repeater>
<div class="item"></div>
</div>
<div id="bottom"></div>
<script type="text/javascript"> 有序展示
var items = document.getElementsByClassName("item");
var hei = items[0].offsetHeight;
document.getElementById("main").style.height = (hei + 10) * Math.ceil(items.length / 4) + ‘px‘;
</script>
css样式表中：
* { padding:0px; margin:0px; } #top { position:relative; width:100%; height:70px; background-color:#ff00dc; } #main { position:relative; width:80%; left:10%; height:auto; } .item { position:relative; width:23%; margin:5px 1%; height:200px; background-color:red; float:left; } #bottom { position:relative; width:100%; height:70px; background-color:#b200ff; }
aspx代码：
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
Repeater1.DataSource = new UsersDA().Select();
Repeater1.DataBind();
}
}
原文：http://www.cnblogs.com/yp11/p/5898311.html
