HTML
<div ><form action="#" method="#" ID="form"> <input type="image" src="http://image.noelsHack.com/fichIErs/2015/34/1439918200-send.png" alt="Send" ID="send" /> <div > <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 – 将浮动元素保留在底部全部内容,希望文章能够帮你解决html – 将浮动元素保留在底部所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)