将表格对齐到右侧

Question

我正在尝试将这两个表单对齐，因为我在左侧有一张地图，我不希望这些表单出现在页面底部。我不是很擅长CSS。有人可以告诉我如何将这两种形式对齐吗？提前谢谢。

<h2> Save Animal's Location </h2>
<form action="insert.php" method="post">
Animal Type: <input type="text" name="firstname">
latitude: <input type ="text" name="lat" >
longitude <input type ="text" name="lon">
Date: <input type="date" name="dateseen">
Time: <input type="time" name="timeseen">


<br>
<input type="submit">
</form>

<h2> Search </h2>
<form action = "search.php" method = "post" >
  Search for: <input type = "text" name ="find" /> in
  <select NAME = "field">
    <Option VALUE = "Animal Type"> Animal Type</option>
    <Option VALUE = "latitude"> Latitude</option>
    <Option VALUE = "longitude"> longitude</option>
    <Option VALUE = "dateseen"> Date Required</option>
    <Option VALUE = "timeseen"> Time</option>
  </Select>
  <input type= "hidden" name = "searching" value ="yes"/>
  <input type= "submit" name = "search" value ="Search"/>
</form>

Answer 1

以下是一个解决方案：http://jsfiddle.net/panchroma/e92A5/1/

在CSS中，使用宽度值来获得所需的结果。您可以使用下面的％值，也可以使用像素值，例如480px

祝你好运！

修改

请使用您的地图信息查看更新的解决方案：

http://jsfiddle.net/panchroma/e92A5/

<强> HTML

<div class="left">
map here
</div>

<div class= "right">

    <h2> Save Animal's Location </h2>
 <form action="insert.php" method="post">
Animal Type: <input type="text" name="firstname">
latitude: <input type ="text" name="lat" >
longitude <input type ="text" name="lon">
Date: <input type="date" name="dateseen">
Time: <input type="time" name="timeseen">


<br>
<input type="submit">
</form>



<h2> Search </h2>
<form action = "search.php" method = "post" >
Search for: <input type = "text" name ="find" /> in
<select NAME = "field">
<Option VALUE = "Animal Type"> Animal Type</option>
<Option VALUE = "latitude"> Latitude</option>
<Option VALUE = "longitude"> longitude</option>
<Option VALUE = "dateseen"> Date Required</option>
<Option VALUE = "timeseen"> Time</option>
</Select>
<input type= "hidden" name = "searching" value ="yes"/>
<input type= "submit" name = "search" value ="Search"/>
</form>
</div>

<强> CSS

.left{
float:left;
width:50%; 
background-color:pink;
}
.right{
float:right;
width:50%;
background-color:#ddd;
}