Можно ли заставить DIV с inline-block вести себя точно так же, как IMG с align = left?

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

попробуйте поместить его в плавающее: слева

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>

Answer 2

Добавить 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>

Вывод: