html - 文本区域填充剩余宽度

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

演示

Answer 2

确保应该填满空间的父母和孩子使用width:100%相对于他们的父母容器。因此<textarea>需要定义为具有 100% 的宽度，以及图像。同样，它们需要被定义为display:inline或inline-block对比block，以便它们彼此相邻出现。另一种选择是使用 CSS 表作为：<div>with display:table，<div>withdisplay:table-row和 then <span>withdisplay: table-cell用于具有 and 的<image>列<textarea>；分别。这会将这些元素放入一个 CSS 表中，如果定义为 width:100% 将填满其父级。