Question

例如，我想要一个textfield旁边的图像，我希望textfield的高度跟随图像的高度，我试过：

<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;
 }

这是一个小提琴：http://jsfiddle.net/8t146hsg/7/

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

1 个答案: