CSS HTML
现在有个页面是这样的 代码如下， 有这么几个需求1，
上下左右居中于
并且两个div 会随着浏览器的大小 自动相对变化
2，
2，
这个div有输入框，输入框的大小可以随着输入文字的长度改变，默认情况下宽 300px
麻烦大神赐教，如何修改当前的页面！
麻烦大神赐教，如何修改当前的页面！
{$PLUGIN_TITLE} ?
plugin content goes here
回复讨论(解决方案)
1，
上下左右居中于
并且两个div 会随着浏览器的大小 自动相对变化
既然要居中自然left right相等，top bottom相等，不需要使用width height。
#main_bg{
position: absolute;
top: 40%;
left: 40%;
right:40%;
bottom:40%;
text-align: left;
background-color: rgba(255, 255, 255, 0.8);
color: #333333;
margin:0 0 0 -176px;
-webkit-box-shadow:0px 1px 2px #7d7d7d;
-moz-box-shadow:0px 1px 2px #7d7d7d;
box-shadow:0px 1px 2px #7d7d7d;
padding:50px;
background-color:#ECEFF1;
}
2.
既然要居中自然left right相等，top bottom相等，不需要使用width height。
#main_bg{
position: absolute;
top: 40%;
left: 40%;
right:40%;
bottom:40%;
text-align: left;
background-color: rgba(255, 255, 255, 0.8);
color: #333333;
margin:0 0 0 -176px;
-webkit-box-shadow:0px 1px 2px #7d7d7d;
-moz-box-shadow:0px 1px 2px #7d7d7d;
box-shadow:0px 1px 2px #7d7d7d;
padding:50px;
background-color:#ECEFF1;
}
2.
这个div有输入框，输入框的大小可以随着输入文字的长度改变，默认情况下宽 300px
这个可以使用span contenteditalbe="true"来模拟input框，span可以随着长度增长改变。
#span {
min-width:200px;
border: 1px solid;
display:block;
white-space:nowrap;
}
这个可以使用span contenteditalbe="true"来模拟input框，span可以随着长度增长改变。
#span {
min-width:200px;
border: 1px solid;
display:block;
white-space:nowrap;
}
