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

【问题标题】：How to place 2 buttons at the left and right sides of the bottom of a div?如何在div底部的左右两侧放置2个按钮？
【发布时间】：2021-07-01 05:40:00
【问题描述】：

我想在屏幕底部添加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>

【问题讨论】：

fixed 不工作？
你能为此制作小提琴吗？
@AbinThaha 如果我用的是fixed，那么2个按钮会互相重叠。
@HareshMakwana 遗憾的是我们无法为此创建小提琴。
您应该使用 fixed 将内容固定在某个位置，并且应该将其提供给父元素。然后让 display flex 将按钮对齐到末端

标签： html css button position

【解决方案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>

【讨论】：