非表格展示信息（布局）

Posted 2020-08-09 yp秋水伊人

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了非表格展示信息（布局）相关的知识，希望对你有一定的参考价值。

 <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;
}

View Code

aspx代码：

protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
Repeater1.DataSource = new UsersDA().Select();
Repeater1.DataBind();
}
}

以上是关于非表格展示信息（布局）的主要内容，如果未能解决你的问题，请参考以下文章

UITableView 是不是支持带有矩形（非圆形）部分的分组样式？

在 Android 中使用具有多个布局的单个片段