我想将html元素并排放置

Question

我正在尝试获取以下输出：[1]：https://imgur.com/a/3MKDLVS 但是我得到了这个：[2]：https://imgur.com/a/wMEX3Jn 我想将所有元素并排放置。它们必须具有相同的高度。

#panel{
    position: absolute;
    bottom: 0;
    margin: 5px;
    height: 20%;
    width: 100%;
}

#send{
    height: 100%;
    width: 20%;
    border-width: 0;
    float: right;
    border-radius: 10px;
}

#message{
    height: 100%;
    width: 50%;
    border-width: 0;
    border-radius: 10px;
    background-color: gray;
}

#upload_img{
    height: 100%;
    width: 20%;
}

<div id="panel">
    <input type="text" id="message">
    <img src="#" id="upload_img">
    <button id="send">გაგზავნა</button>
</div>

Answer 1

只需将display: flex;添加到#panel即可对齐

#panel{
    position: absolute;
    bottom: 0;
    margin: 5px;
    height: 20%;
    width: 100%;
    display: flex;
}

#send{
    height: 100%;
    width: 20%;
    border-width: 0;
    float: right;
    border-radius: 10px;
}

#message{
    height: 100%;
    width: 50%;
    border-width: 0;
    border-radius: 10px;
    background-color: gray;
}

#upload_img{
    height: 100%;
    width: 20%;
}

<div id="panel">
    <input type="text" id="message">
    <img src="#" id="upload_img">
    <button id="send">გაგზავნა</button>
</div>