格式化网站设计

Question

下面的代码显示表单上方和谷歌地图downside.how我应该编辑代码，在我的网页的左侧显示表单和在右侧的谷歌地图在同一行？

<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=“id=”将两者都包装起来，也就是说，您的“id=”行“id=”“id=”将表单向左浮动，而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>