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”正在包装两者，所以说你的“行” 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>

格式化网站设计

1 个答案: