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

html – 将浮动元素保留在底部,第1张

概述有我的代码: 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 有我的代码: https://jsfiddle.net/a4Le1jkz/.

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 – 将浮动元素保留在底部所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1068468.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-26
下一篇 2022-05-26

发表评论

登录后才能评论

评论列表(0条)

保存