将表格与图像 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，它有很多属性，比如 left、right 或 top。 我不完全了解 css，但他们在互联网上有很多教程。