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％將填充其父項。