将表格与图像对齐HTML

Question

我正在尝试对齐图像旁边的表格，该图像具有与当前文本对齐的文本。我想让下拉对齐图像的下边缘，任何人都可以帮助我吗？这是我的代码。

<input type="image" src="image.jpg" name="tee" width="180" height="180" ALIGN="center">xxxxxx 

<table> 
<tr><td><input type="hidden" name="on0" value="Color">Color</td><td><input type="hidden" name="on1" value="Size">Size</td></tr> 
<tr> 
<td><select name="os0"> 
    <option value="White">White</option> 
    <option value="Black">Black</option> 
    <option value="Grey">Grey</option> 
</select> </td> 
<td><select name="os1"> 
    <option value="S">S </option> 
    <option value="M">M </option> 
    <option value="L">L </option> 
    <option value="XL">XL </option> 
</select> </td> 

</tr> 

Answer 1

根据您的描述，这是最好的我可以拿出CSS来设计它。

<style> 
div {height: 180px; 
width: 300px;} 

#image { 
    float:left; 
} 
table { float:right; 
    margin-top: 130px; 
    } 

    </style> 

<div> 
<input id="image" type="image" src="image.jpg" name="tee" width="180" height="180"    ALIGN="center"> 

<table> 
<tr><td><input type="hidden" name="on0" value="Color">Color</td><td><input type="hidden" name="on1" value="Size">Size</td></tr> 
<tr> 
<td><select name="os0"> 
<option value="White">White</option> 
<option value="Black">Black</option> 
<option value="Grey">Grey</option> 
</select> </td> 
<td><select name="os1"> 
<option value="S">S </option> 
<option value="M">M </option> 
<option value="L">L </option> 
<option value="XL">XL </option> 
</select> </td> 

</tr></table></div> 

但你也可以使用一个表，然后垂直对齐第二个单元格的内容的行到底是否解决了该问题。

<table><tr><td> 
<input id="image" type="image" src="image.jpg" name="tee" width="180" height="180" ALIGN="center"></td> 

<td valign="bottom"> <!-- This line right here is what does the trick --> 

<table> 
<tr><td><input type="hidden" name="on0" value="Color">Color</td><td><input type="hidden" name="on1" value="Size">Size</td></tr> 
<tr> 
<td><select name="os0"> 
<option value="White">White</option> 
<option value="Black">Black</option> 
<option value="Grey">Grey</option> 
</select> </td> 
<td><select name="os1"> 
<option value="S">S </option> 
<option value="M">M </option> 
<option value="L">L </option> 
<option value="XL">XL </option> 
</select> </td> 

</tr></table> 
    </td></tr> 
     </table> 

希望这有助于！

Answer 2

也许你应该去的CSS3，它有一个像左，右或顶部的很多特性。 我不完全知道css，但他们在互联网上的很多教程。