是否可以使用内联块使DIV的行为与使用align = left的IMG完全相同？

Question

在以下示例中，使DIV内联块关闭valign效果。是否可以像下一行中的IMG一样将其恢复？

<table border="1">
<tr>
    <td height="50" valign="top">

        <div style="display:inline-block; width:65px; height:40px; background-color: yellow; text-align: left;"></div>
        <input type="button" value="button">

         Some text

    </td>
</tr>

<tr>
    <td height="50" valign="top">

        <img src="images/spacer.gif" width="65" height="40" align="left" border="1">
        <input type="button" value="button">

         Some text

    </td>
</tr>

</table>

Answer 1

将vertical-align: top;添加到您的<div>。

<div style="display:inline-block; width:65px; height:40px; background-color: yellow; text-align: left;border: 1px solid black;vertical-align:top;"></div>

演示：http://jsfiddle.net/ThinkingStiff/xvpYF/

HTML：

<table border="1">
<tr>
<td height="50" valign="top">
    <div style="display:inline-block; width:65px; height:40px; background-color: yellow; text-align: left;border: 1px solid black;vertical-align:top;"></div>
    <input type="button" value="button">
     Some text
</td>
</tr>
<tr>
<td height="50" valign="top">
    <img src="images/spacer.gif" width="65" height="40" align="left" border="1">
    <input type="button" value="button">
     Some text
</td>
</tr>
</table>

输出：

Answer 2

尝试将它放到浮动状态：左

http://jsfiddle.net/pixelass/XDNe6/

<table border="1">
<tr>
    <td height="50" valign="top">

        <div style="display:inline-block;float:left; width:65px; height:40px; background-color: yellow; text-align: left;"></div>
        <input type="button" value="button">

         Some text

    </td>
</tr>

<tr>
    <td height="50" valign="top">

        <img src="images/spacer.gif" width="65" height="40" align="left" border="1">
        <input type="button" value="button">

         Some text

    </td>
</tr>

</table>