Question

我的<div>包含<img>和<textarea>，如下所示：

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

<img>的宽度可变。如何让textarea填充剩余空间？

谢谢！

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，<span> display: table-cell列{拥有<image>和<textarea>;分别。这将使这些元素适合CSS表格，如果定义为宽度：100％将填充其父级。

Textarea填充剩余宽度

2 个答案: