html - 如何在图像旁边放置一个文本区域并让它填满其余空间？

Question

我正在尝试制作漂亮的评论框。我想在一行/行中的文本区域之前显示图像。图像大小应该是固定的。 textarea 应该填满剩余的空间。该网站具有动态宽度，因此固定文本区域宽度对我不起作用。

但文本区域不会紧挨着图像，而是在图像下方。

<img src="http://i2.wp.com/c0589922.cdn.cloudfiles.rackspacecloud.com/avatars/male200.png" style="float:left;"/>
<textarea style="float: left; height: 200px; margin-left: 210px; width:100%"></textarea>

See this fiddle .

关于如何实现这一点有什么想法吗？ Check out the comment box at cnn.com to see what I'm talking about .

Answer 1

我认为这段代码会做你想做的事:

<div style="position:absolute; left:100px; right:100px;">
  <div style="position:relative;">
    <img src="http://i2.wp.com/c0589922.cdn.cloudfiles.rackspacecloud.com/
          avatars/male200.png" style="position:absolute;">
    <div style="position: absolute; left:210px; right:0px; top:0px;">
      <input type="textbox" style="width:100%; height:200px; display:block;
          padding:0;">
    </div>
  </div>
</div>

可能需要一些微调。我的回答基于这篇文章:http://jsfiddle.net/QaWMN/2/ .