html - 右对齐表格

Question

我试图将这两个表格右对齐，因为我在左侧有一张 map ，我不希望这些表格出现在页面底部。我不是很擅长 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 中，调整宽度值以获得您需要的结果。您可以像下面那样使用 %values ，也可以使用像素值，例如480 像素

祝你好运!

编辑

请使用您的 map 信息查看更新的解决方案:

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;
}