將表格與圖像對齊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，但他們在互聯網上的很多教程。