textarea的填充remaing宽度

Question

我具有含<img>和<textarea>这样的<div>：

<div style="width: 50%"> 
<img /> 
<textarea>...</textarea> 
</div> 

<img>具有可变的宽度。如何使textarea fillup剩余空间？

谢谢！

Answer 1

您可以使用display: table-cell和帮助实现这一目标，像这样：

HTML

<div class="container"> 
    <div class="containerRow"> 
     <div class="imageContainer"> 
      <img href="[your_image_address]" alt="[your_image_alt]" /> 
     </div> 
     <div class="textareaContainer"> 
      <textarea>[your_textarea_content]</textarea> 
     </div> 
    </div> 
</div> 

CSS

.container { 
    display: table; 
    width: 100%; 
} 
.containerRow { 
    display: table-row; 
} 
.imageContainer { 
    display: table-cell; 
    vertical-align: top; 
    width: 1px; 
} 
.textareaContainer { 
    display: table-cell; 
    vertical-align: top; 
} 
.textareaContainer textarea { 
    width: 100%; 
} 

Demo

Answer 2

确保应填写空间的父母和子女使用width:100%，这与父容器相关。所以<textarea>需要被定义为具有100％的宽度以及图像。同样，他们需要定义为display:inline或inline-block与block，以便它们彼此相邻。另一种选择是使用CSS表：<div>与display:table，<div>与display:table-row，然后用display: table-cell对于具有<image>和<textarea>列<span>;分别。这将适合这些元素到CSS表格中，如果将其定义为宽度：100％将填充其父项。