html - 如何在没有表格元素的情况下让一个元素的高度自动跟随下一个元素的高度？

Question

例如，我想要一个图像紧挨着文本框，我想要文本框的高度跟随图像的高度，我试过:

<table>
  <tr style="height:auto;">
    <td style="height:100%;">
      <input style="height:100%;"/>
    </td>
    <td>
      <img src="https://www.gravatar.com/avatar/65756ce7bab4d76ac10456972dd9f21d?s=96&d=identicon&r=PG&f=1"/>
    </td>
  </tr>
</table>

我在这里使用头像作为示例图像，我想要文本字段的高度 当我更改另一个具有不同高度的图像时会自动更改。

我觉得上面的html代码并不简单，我不想用table元素来做，有没有更简单的方法呢？

Answer 1

这是一个例子，假设我理解你的问题:

HTML:

<div>
  <input>
  <img 
src="https://www.gravatar.com/avatar/65756ce7bab4d76ac10456972dd9f21d? 
s=96&d=identicon&r=PG&f=1"/>
</div>

CSS:

input
{
    height: 90px;
    float: left;
 }
 div
 {
   float:left;
 }
 img
 {
   float: left;
   margin-left: 10px;
 }

这是一个 fiddle :http://jsfiddle.net/8t146hsg/7/