html – 将浮动元素保留在底部

有我的代码:https://jsfiddle.net/a4Le1jkz/.

HTML

<div class="form-container">
<form action="#" method="#" id="form">
    <input type="image" src="http://image.noelshack.com/fichiers/2015/34/1439918200-send.png" alt="Send" id="send" class="send" />
    <div class="twrap">
        <textarea name="message" id="message" rows=1></textarea></div>
   </form>
</div>

CSS

.form-container {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    position: absolute;   
    width: 100%; 
    color: white; 
    top: auto;
    bottom: 0; 
    overflow: hidden; 
    padding: 10px;
}
.form-container .twrap {
    overflow: hidden;
    padding-right: 10px;
}

.form-container textarea {
    width: 100%;
    height: 30px;
    line-height: 30px;
    max-height: 120px;
    font-size: 1.2em;
    resize : none;
}

.form-container .send {
    padding: 3px;
    height: 30px;
    float: right;
}

即使用户按Enter键,我也希望将图像保留在textarea的底部. textearea必须继续调整其宽度.

图像浮动,所以我不知道如何将它保持在底部.

最佳答案
你必须把.send放在位置:绝对;底部:10px的;右:15px的

并设置textarea的宽度使它们不重叠.

这里是你的JsFiddle:https://jsfiddle.net/a4Le1jkz/1/的更新

编辑:
这里有一个更新:https://jsfiddle.net/a4Le1jkz/7/我设置宽度:100%到textarea,我添加到.twrap填充 – 右边等于我需要的右边图像的地方.

转载注明原文:html – 将浮动元素保留在底部 - 代码日志