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

也许你应该选择CSS3，它有很多属性，如左，右或顶。我完全不了解css，但他们在互联网上有很多教程。

Answer 2

根据您的描述，这是我用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>

希望这有帮助！

将表格与图像HTML对齐

2 个答案: