因为要动态生成页面所以就想用div来布局,因为对css不熟,弄了2个小时才搞明白(感觉还不如直接用Table)。其中最讨厌的就是Div内部的控件在垂直方向没法居中,其解决办法就是使用 padding-top与padding-bottom大小相等,并且padding-top + padding-buttom + height为实际Div高度。
使用代码:
<
style type
=
"
text/css
"
>
.layout
... {
margin:0px auto; //页面内居中
width: 1024px;
font-size: 10pt;
}
.half
... {
float: left; //为了让两个div并列放置
width: 49%; //如果是50%两个div就没法并列放在一行上,不知道有没有更好的解决方法
}
.single
... {
width: 98%;
}
.left
... {
background-color: #E8F5FE;
border: 1px solid #A9C9E2;
float: left;
height: 30px;
width: 175px;
text-align: right;
padding-right: 10px;
line-height: 30px; //与height大小相等,用于文字垂直居中
}
.right
... {
background-color: #E8F5FE;
border: 1px solid #A9C9E2;
padding-left: 10px;
background-color:White ;
height: 24px; //没有width属性,自适应宽度
padding-top: 3px;
padding-bottom: 3px;
line-height: 24px;
}
.layout
... {
margin:0px auto; //页面内居中
width: 1024px;
font-size: 10pt;
}
.half
... {
float: left; //为了让两个div并列放置
width: 49%; //如果是50%两个div就没法并列放在一行上,不知道有没有更好的解决方法
}
.single
... {
width: 98%;
}
.left
... {
background-color: #E8F5FE;
border: 1px solid #A9C9E2;
float: left;
height: 30px;
width: 175px;
text-align: right;
padding-right: 10px;
line-height: 30px; //与height大小相等,用于文字垂直居中
}
.right
... {
background-color: #E8F5FE;
border: 1px solid #A9C9E2;
padding-left: 10px;
background-color:White ;
height: 24px; //没有width属性,自适应宽度
padding-top: 3px;
padding-bottom: 3px;
line-height: 24px;
}
<
form id
=
"
form1
"
runat
=
"
server
"
>
< div class = " layout " >
< div class = " half " >
< div class = " left " >< asp:Label ID = " Label1 " runat = " server " Text = " 左边 " Height = " 20px " ></ asp:Label ></ div >
< div class = " right " ></ div >
</ div >
< div class = " half " >
< div class = " left " >< asp:Label ID = " Label2 " runat = " server " Text = " 右边 " ></ asp:Label ></ div >
< div class = " right " ></ div >
</ div >
< div class = " layout " >
< div class = " single " >< div class = " left " > 左边 </ div >< div class = " right " >< asp:TextBox ID = " TextBox3 "
runat = " server " Width = " 300px " ></ asp:TextBox ></ div ></ div >
</ div >
< div class = " layout " >
< div class = " half " >< div class = " left " >
</ div >< div class = " right " ></ div ></ div >
< div class = " half " >< div class = " right " > 代码含义 </ div ></ div >
</ div >
</ div >
</ form >
< div class = " layout " >
< div class = " half " >
< div class = " left " >< asp:Label ID = " Label1 " runat = " server " Text = " 左边 " Height = " 20px " ></ asp:Label ></ div >
< div class = " right " ></ div >
</ div >
< div class = " half " >
< div class = " left " >< asp:Label ID = " Label2 " runat = " server " Text = " 右边 " ></ asp:Label ></ div >
< div class = " right " ></ div >
</ div >
< div class = " layout " >
< div class = " single " >< div class = " left " > 左边 </ div >< div class = " right " >< asp:TextBox ID = " TextBox3 "
runat = " server " Width = " 300px " ></ asp:TextBox ></ div ></ div >
</ div >
< div class = " layout " >
< div class = " half " >< div class = " left " >
</ div >< div class = " right " ></ div ></ div >
< div class = " half " >< div class = " right " > 代码含义 </ div ></ div >
</ div >
</ div >
</ form >