CSSの問題、教えてください！！！！！！！！！！！！！！！！！！！！！！ _html/css

CSS HTML

コードは次のとおりです。 1.

が中央にあります。 2 つの div です。ブラウザのサイズに応じて自動的に変更されます
2.

この div には入力ボックスがあり、入力テキストの長さに応じて変更できます。デフォルトでは幅 300px です

トラブル現在のページを変更する方法を教えてください!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title>   {$PLUGIN_TITLE}  </title><script language="php">   $templateVersion = 2; // Template version   // $fieldRowLayout determines the layout of the form fields   // Options are 'fieldset' and 'table'   // fieldset: displays fieldnames above the input box   // table:    displays fieldnames in front of the input box   $fieldRowLayout = 'table';   // This JS file checks the form for required fields and correct syntax:   print '<scr' . 'ipt src="/x/plugin/plugin.js.php?' . htmlspecialchars($_SERVER['QUERY_STRING']) . '" type="text/javascript"></scr' . 'ipt>';</script>  <style type="text/css">html {	height: 100%;	width: 100%;	background: #FFFFFF; /* Old browsers */	font-family:'微软雅黑','宋体',Arial, Helvetica, sans-serif; }body {	height: 100%;	width: 100%;	margin: 0;	border: 0;	background-position: center center;	-webkit-background-size: cover;	-o-background-size: cover;	-moz-background-size: cover;	background-size: cover;	font-size:12px; 	font-family:'微软雅黑','宋体',Arial, Helvetica, sans-serif;  	color:#333333; }body.box{	background-image: url(images/bg1.jpg);	background-color:#adc8db;}#main_bg{	position: absolute;	top: 40%;	left: 50%;	width: 20%;	height:10%;	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;}#logo{	position:absolute;	top: 32%;	left: 50%;	width: 172PX;	height: 43px;    margin:0 0 0 -176px; }#headerDiv,#titleDiv,#contentDiv,#footerDiv{	background-color: rgba(255, 255, 255, 0.8);     border:none;}td input{ width:234px;}label.req{display:none; width:0px;}div.explanation{display:none;}.input input{ background-image:url(/mailings/268/tmpl/438/images/input.jpg);                   width:70%; 				  height:36px; 				  font-size:14px; 				  font-family:'微软雅黑','宋体',Arial, Helvetica, sans-serif; 				  color:#999999; 				  border:none; 				  padding-left:10px;}textarea{ background-color:#25282b; width:222px;  height:136px; border:none;}.buttons button{background-image:url(/mailings/268/tmpl/438/images/aniu1.png);                       width:97px; 				       height:39px;					   border:none;}p.buttons{ text-align:right;}					   				fieldset.odd, fieldset.even {    padding: 0px; 	margin:0px;	text-align:left;}</style> </head> <body class="box">  <div id="logo">   ?<img src="images/logo.png" alt="" />  </div>  <div id="main_bg">   <div class="editable">    plugin content goes here	<input type=text>   </div>  </div> </body></html>

ログイン後にコピー

ディスカッションへの返信 (解決策)

1.
は
の上下左右の中央に配置されます。 2 つの div はブラウザに従います

を基準にサイズが自動的に変更されます

左右は中心に等しく、上下は等しいので、幅と高さを使用する必要はありません。
#main_bg{
位置: 絶対;
左: 40%;
テキスト整列: 左; , 255, 0.8);
カラー: #333333;
マージン:0 0 0 -176px;
-moz-box-shadow:0px 1px #7d7d 7d;
box-shadow:0px 1px 2px #7d7d7d;
pattern:#ECEFF1;
}

2.

この div には入力ボックスがあり、そのサイズ入力テキストの長さが変わると、デフォルトで幅は 300px になります

これは、span contenteditalbe="true" を使用して入力ボックスをシミュレートすることができ、長さが大きくなるにつれてスパンを変更できます。 {#Span {s 最小幅: 200px;
ボーダー: 1px ソリッド;
ホワイトスパイ: 右:
}
}}