如何让输入栏粘在 div 容器的底部？

Question

我试图让入口栏停留在 div 容器的底部，但我不知道该怎么做。 有什么帮助吗？

import React, { Component } from 'react';
import './App.css';
import './NameBox';

class ChatBox extends Component {
    render() {
        return (
            <div>
                <div className="chat-box-container">
                    <div className="chat-box">
                        <h1>Chat Room</h1>
                        <div style={{/*GET THIS TO STICK TO BOTTOM OF THE DIV ABOVE*/}}>
                            <div className="input-group mb-3">
                                <input id="name" type="text" class="form-control" placeholder="Name"/>
                                <div className="input-group-append">
                                    <a href="/chat" onClick={this.getName} className="btn btn-success" type="button">Enter</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <p>{localStorage.getItem("username")} has entered the chat...</p>
            </div>
        );
    }
}

export default ChatBox;

Answer 1

我知道您的代码在 React 和 JSX 中，但只是作为一般答案。 要相对于 div 定位某些东西，您需要给父 div position: relative ，然后对于入口栏，您可以执行position: absolute与bottom: 0以将入口栏定位在底部。

 <div style=" position: relative; width: 200px; height: 200px; border: 1px solid black;" > <input type="text" style=" position: absolute; bottom: 0;" placeholder="Entry Bar" /> </div>

Answer 2

这是我的 css:)

.name-box-container {
  margin: auto;
}

.name-box {
  display: block;
  margin-top: 150px;
  margin-left: 600px;
  margin-right: 600px;
  border: 1px solid lightgrey;
  border-radius: 5px;
  text-align: center;
}

.entry-bar-container {
  margin: 30px;
  text-align: center;
}

.chat-box-container {
  margin: auto;
}

.chat-box {
  display: block;
  margin-top: 30px;
  margin-left: 450px;
  margin-right: 450px;
  height: 630px;
  border: 1px solid lightgrey;
  border-radius: 5px;
  text-align: center;
}