html - テキストエリアの塗り残し幅

Question

次のような<div>an<img>と aを含む があります。<textarea>

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

<img>可変幅です。テキストエリアを残りのスペースで埋めるにはどうすればよいですか?

ありがとう！

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:inlineor inline-blockvsとして定義する必要があります。もう 1 つのblockオプションは、CSS テーブルを次のように<div>使用することです。それぞれ。これらの要素は CSS テーブルに収まり、width:100% として定義されている場合はその親が埋められます。display:table<div>display:table-row<span>display: table-cell<image><textarea>