html - 格式化网站设计

Question

以下代码显示表单上方和谷歌地图下方。我应该如何编辑代码以在同一行中的左侧显示表单和在网页右侧显示谷歌地图？

<form action="php/process.php" method="post" enctype="multipart/form-data">
    <p>
        Subject<br>
        <input type="text" name="subject" size="40">
    </p>
    <p>
        Email<br>
        <input type="text" name="email" size="40">
    <p>
        Comment<br>
        <textarea name="message" rows="5" cols="40"></textarea>
    </p>
    <p>
        <button type="submit">Send</button>
    </p>
</form>

</div>
<!--contact form ends-->

<!--google map starts-->
<h2 align="right">
&nbsp;&nbsp;&nbsp;&nbsp;
<iframe width="400" height="250" frameborder="1" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps/ms?msa=0&amp;msid=202307324044817298386.0004b64eed9ece46b338e&amp;ie=UTF8&amp;t=h&amp;z=17&amp;output=embed"></iframe>
<br /><small>
<h2>View <a href="https://maps.google.com/maps/ms?msa=0&amp;msid=202307324044817298386.0004b64eed9ece46b338e&amp;ie=UTF8&amp;t=h&amp;z=17&amp;source=embed" style="color:#0000FF;text-align:left">KsV's HoMe</a> in a larger map</small></h2>
<!--gogle map ends-->

Answer 1

你可以这样做：

div id="box" 将两者都包裹起来，所以说你的“line” div id="formleft" 使表单向左浮动， div id="mapright" 使地图向右浮动

<div id="box" style="position:relative;height:250px;width:820px;margin:0;padding:0;">
<div id="formleft" style="position:relative;float:left;width:400px;height:250px">
<form action="php/process.php" method="post" enctype="multipart/form-data">
<p>
  Subject<br>
<input type="text" name="subject" size="40">
</p>
<p>
Email<br>
<input type="text" name="email" size="40">
<p>
Comment<br>
<textarea name="message" rows="5" cols="40"></textarea>
</p>
<p>
<button type="submit">Send</button>
</p>


 </form>

</div>
<!--contact form ends-->
<div id="mapright" style="position:relative;float:right;width:400px;height:250px">
<!--google map starts--><h2 align="right">
&nbsp;&nbsp;&nbsp;&nbsp;     <iframe width="400" height="250" frameborder="1"        scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps/ms?msa=0&amp;msid=202307324044817298386.0004b64eed9ece46b338e&amp;ie=UTF8&amp;t=h&amp;z=17&amp;output=embed">    </iframe><br /><small><h2>View <a href="https://maps.google.com/maps/ms?msa=0&amp;msid=202307324044817298386.0004b64eed9ece46b338e&amp;ie=UTF8&amp;t=h&amp;z=17&amp;source=embed" style="color:#0000FF;text-align:left">KsV's HoMe</a> in a larger map</small></h2>
<!--gogle map ends-->
</div>
</div>