Question

我附上了一个布局代码。这是表单布局。如何根据浏览器窗口大小调整布局宽度。我已经尝试过这段代码，但无法取得好成绩。有些人称之为“液体布局”可能是真实的。我不知道它.plz做的帮助。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Example</title>
</head>
<!--body-->
<body style="background-color:#F2F2F2" onload="showField();">

<!--table starts here-->
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0"    style="background-color:#FFF;">//table
<tr>
<td><table width="800" cellpadding="0" cellspacing="0" border="0" style="background- color:#FFF">
  <tr>
    <td colspan="4" bgcolor="#ffffff"></td>
  </tr>
  <tr>
    <td width="23" bgcolor="#ffffff"><img src="" width="23" height="45" border="0"  />      </td>
    <td width="606" align="left" valign="middle" bgcolor="#ffffff"></td>
    <td width="148" align="right" valign="middle" style="font-family:Arial, Helvetica, sans-serif; font-size:10px; color:#999999;">&nbsp;</td>
    <td width="23" bgcolor="#ffffff"><img src="" width="23" height="45" border="0" />      </td>
   </tr>
  <tr>
    <td bgcolor="#6db33f"></td>
    <td colspan="2" align="left" valign="middle" bgcolor="#6db33f" style="font-family: SimHei, SimSun, Arial; font-size:32px; color:#FFFFFF;">
    Example<br />
    <span style="font-size:14px;"></span></td>
    <td width="23" bgcolor="#6db33f">&nbsp;</td>
  </tr>
  </table></td>
 </tr>
 <tr>
 <td>

<table width="750" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td valign="top">
    <!--form goes here-->
    <form name="TheForm" action="" method="post" dfield="longForm" onsubmit="return Form1_Validator(this)">


    <!--This is a nested table-->
    <table width="100%" border="0" cellspacing="5" cellpadding="0" style="background-color:#FFF;-moz-box-shadow: 5px 5px 5px #ccc; -webkit-box-shadow: 5px 5px 5px #ccc;box-shadow: 5px 5px 5px #ccc;">
      <tr>
            <td valign="top">

              <table width="100%" border="0" cellspacing="5" cellpadding="0" style="background-color:#F2F2F2">
                <tr>
                  <td>

                    <table width="100%" border="0" cellpadding="3" cellspacing="0" style="background-color:#F2F2F2;">


                        <tr>
                        <td height="35" bgcolor="#6DB33F" style="color: #FFF; font-size: 14px; font-weight: bold; padding-left: 10px;"></td>
                        <td bgcolor="#6DB33F">&nbsp;</td>
                        <td align="left" bgcolor="#6DB33F">&nbsp;
                        </td>
                        </tr>
                        <tr>
                        <td height="25">First Name<span style="color: #6699cc;">* </span>:    </td>
                        <td>&nbsp;</td>
                        <td align="left">
                          <input type="text" name="lastName" id="lastName" size="40" onblur="trim(document.TheForm.lastName)" value=""  /></td>
                        </tr>
                        <tr>
                        <td width="36%" height="25" bgcolor="#EBEBEB">Last Name<span style="color: #6699cc;"> *</span>:</td>
                        <td width="1" bgcolor="#EBEBEB">&nbsp;</td>
                        <td width="63%" align="left" bgcolor="#EBEBEB">
                          <input type="text" name="firstName" id="firstName" size="40" onblur="trim(document.TheForm.firstName)" value="" /></td>
                        </tr>

                        <tr>
                        <td height="25">Email <span style="color: #6699cc;">*</span>:     </td>
                        <td>&nbsp;</td>
                        <td align="left">
                          <input type="text" name="company" id="company" size="40" onblur="trim(document.TheForm.company)" value="" /></td>
                        </tr>
                        <tr>
                        <td bgcolor="#EBEBEB" height="25">Phone <span style="color: #6699cc;">*</span>:</td>
                        <td bgcolor="#EBEBEB">&nbsp;</td>
                        <td align="left" bgcolor="#EBEBEB">
                          <input type="text" name="email" id="email" size="40" onblur="trim(document.TheForm.email)" value="" /></td>
                         </tr>
  </table>

Answer 1

CSS媒体查询是一个选项吗？这样，您可以根据分辨率定义每个控件的全局大小。比如800px及以下的窗口分辨率，所有文本框的宽度都是100px。当窗口分辨率大于800px时，所有文本框的宽度可以是200px。这只是一个简单的属性示例，但您可以在媒体查询中定义大量内容。

根据窗口宽度调整布局宽度

1 个答案: