html - 如何在div底部的左右两侧放置2个按钮？

Question

我想在屏幕底部以固定位置添加Back和按钮。Next对于我的代码，如果我更改屏幕大小，按钮将移动到屏幕的顶部/底部（我已附上两者的屏幕截图）。请检查我的代码并帮助我解决这个问题。

代码

    <div id="text-area">
        <p class="mb-4">
            <strong>Textarea</strong>
        </p>
        <textarea></textarea>
        <p class="d-flex justify-content-between">
            <button class="btn btn-link button" id="back">
                <i class="fa fa-long-arrow-alt-left me-3"></i>
                Back
            </button>
            <button class="btn btn-link button" id="next">
                Next
                <i class="fa fa-long-arrow-alt-right ms-3"></i>
            </button>
        </p>
    </div>

标签： htmlcssbuttonposition

Answer 1

这解决了我的问题。谢谢大家的时间。快乐编码。

<div class="d-flex flex-column flex-grow-1" id="text-area">
    <div class="flex-grow-1">
        <p class="mb-4">
            <strong>Textarea</strong>
        </p>
        <textarea></textarea>
    </div>
    <p class="d-flex justify-content-between">
        <button class="btn btn-link button" id="back">
            <i class="fa fa-long-arrow-alt-left me-3"></i>
            Back
        </button>
        <button class="btn btn-link button" id="next">
            Next
            <i class="fa fa-long-arrow-alt-right ms-3"></i>
        </button>
    </p>
</div>