首页 > 代码库 > 非表格展示信息（布局）
非表格展示信息（布局）
<title></title> <link href=http://www.mamicode.com/"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();
}
}
非表格展示信息（布局）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。