Div宽度和textarea对齐并扩展为父级（响应）

Question

我在html中有以下列表：

<style>
    .right { display: inline-block; }
</style>

<ul class="no-bullets-list">
    <li>
    <div class="list-item">
    <h1>Some Text</h1>
    <img src="image-URL"/>
    <div class="right">
            <input type="text"/>
        <textarea></textarea>
    </div>
    </div>
</li>
</ul>

我希望像图像一样显示这些元素（顺便说一下对图像感到遗憾:)）

我遇到的问题是class =“right”的div不会扩展到父级的大小，因此textarea不会相应增长。 我需要能够响应地调整大小，以便div和textarea必须以连续的方式响应。

有什么想法吗？我可以使用bootstrap，所以如果有人有解决方案使用它。

由于

Answer 1

textarea的高度和宽度由其“行”和“列”值决定。这些是静态值，因此它们不会根据查看它们的设备而更改。你可以看看javascript解决方案，但它可能比它的价值更多的努力。只是我的两分钱。 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea