将浮动元素保持在底部

时间：2015-08-18 17:25:46

标签： html css

有我的代码：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必须继续调整宽度。

图像浮动，所以我不知道如何将图像保持在底部。

4 个答案:

答案 0 :(得分：3)

您必须将.send放入position: absolute; bottom:10px; right:15px

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

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

编辑： 这里有一个更新：https://jsfiddle.net/a4Le1jkz/7/我将width: 100%设置为textarea，并添加到.twrap padding-right，等于右边图像所需的位置。

答案 1 :(得分：2)

您是否已开始使用dexOptions{ jumboMode = true; } ，或者您是否对float: right开放。通过一些调整，我能够使用display: inline-block;选项使其工作。

＆＃13;
＆＃13; 
display
＆＃13; 
/*!
	Autosize 3.0.8
	license: MIT
	http://www.jacklmoore.com/autosize
*/
!function(e,t){if("function"==typeof define&&define.amd)define(["exports","module"],t);else if("undefined"!=typeof exports&&"undefined"!=typeof module)t(exports,module);else{var o={exports:{}};t(o.exports,o),e.autosize=o.exports}}(this,function(e,t){"use strict";function o(e){function t(){var t=window.getComputedStyle(e,null);"vertical"===t.resize?e.style.resize="none":"both"===t.resize&&(e.style.resize="horizontal"),u="content-box"===t.boxSizing?-(parseFloat(t.paddingTop)+parseFloat(t.paddingBottom)):parseFloat(t.borderTopWidth)+parseFloat(t.borderBottomWidth),i()}function o(t){var o=e.style.width;e.style.width="0px",e.offsetWidth,e.style.width=o,v=t,l&&(e.style.overflowY=t),n()}function n(){var t=window.pageYOffset,o=document.body.scrollTop,n=e.style.height;e.style.height="auto";var i=e.scrollHeight+u;return 0===e.scrollHeight?void(e.style.height=n):(e.style.height=i+"px",document.documentElement.scrollTop=t,void(document.body.scrollTop=o))}function i(){var t=e.style.height;n();var i=window.getComputedStyle(e,null);if(i.height!==e.style.height?"visible"!==v&&o("visible"):"hidden"!==v&&o("hidden"),t!==e.style.height){var r=document.createEvent("Event");r.initEvent("autosize:resized",!0,!1),e.dispatchEvent(r)}}var r=void 0===arguments[1]?{}:arguments[1],d=r.setOverflowX,s=void 0===d?!0:d,a=r.setOverflowY,l=void 0===a?!0:a;if(e&&e.nodeName&&"TEXTAREA"===e.nodeName&&!e.hasAttribute("data-autosize-on")){var u=null,v="hidden",f=function(t){window.removeEventListener("resize",i),e.removeEventListener("input",i),e.removeEventListener("keyup",i),e.removeAttribute("data-autosize-on"),e.removeEventListener("autosize:destroy",f),Object.keys(t).forEach(function(o){e.style[o]=t[o]})}.bind(e,{height:e.style.height,resize:e.style.resize,overflowY:e.style.overflowY,overflowX:e.style.overflowX,wordWrap:e.style.wordWrap});e.addEventListener("autosize:destroy",f),"onpropertychange"in e&&"oninput"in e&&e.addEventListener("keyup",i),window.addEventListener("resize",i),e.addEventListener("input",i),e.addEventListener("autosize:update",i),e.setAttribute("data-autosize-on",!0),l&&(e.style.overflowY="hidden"),s&&(e.style.overflowX="hidden",e.style.wordWrap="break-word"),t()}}function n(e){if(e&&e.nodeName&&"TEXTAREA"===e.nodeName){var t=document.createEvent("Event");t.initEvent("autosize:destroy",!0,!1),e.dispatchEvent(t)}}function i(e){if(e&&e.nodeName&&"TEXTAREA"===e.nodeName){var t=document.createEvent("Event");t.initEvent("autosize:update",!0,!1),e.dispatchEvent(t)}}var r=null;"undefined"==typeof window||"function"!=typeof window.getComputedStyle?(r=function(e){return e},r.destroy=function(e){return e},r.update=function(e){return e}):(r=function(e,t){return e&&Array.prototype.forEach.call(e.length?e:[e],function(e){return o(e,t)}),e},r.destroy=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],n),e},r.update=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],i),e}),t.exports=r});
autosize($('#message'));
＆＃13; 
.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;
    display: inline-block;
    width: 90%;
}

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

.form-container .send {
    padding: 3px;
    height: 30px;
    display: inline-block;
    vertical-align: bottom;
}
＆＃13;
＆＃13;
＆＃13;

进行了以下更改：

<强> HTML：

在输入之前移动了<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="form-container"> <form action="#" method="#" id="form"> <div class="twrap"> <textarea name="message" id="message" rows=1></textarea> </div><input type="image" src="http://image.noelshack.com/fichiers/2015/34/1439918200-send.png" alt="Send" id="send" class="send" /> </form> </div>。

<强> CSS：

<div class="twrap">和display: inline-block;已添加到width: 90% CSS。

.form-container .twrap和display: inline-block;已添加到vertical-align: bottom; CSS中。此外，还从此CSS中删除了.form-container .send。

答案 2 :(得分：2)

使用flexbox，您可以轻松实现您想要的效果：

＆＃13;
＆＃13; 
/*!
	Autosize 3.0.8
	license: MIT
	http://www.jacklmoore.com/autosize
*/
! function (e, t) {
    if ("function" == typeof define && define.amd) define(["exports", "module"], t);
    else if ("undefined" != typeof exports && "undefined" != typeof module) t(exports, module);
    else {
        var o = {
            exports: {}
        };
        t(o.exports, o), e.autosize = o.exports
    }
}(this, function (e, t) {
    "use strict";

    function o(e) {
        function t() {
            var t = window.getComputedStyle(e, null);
            "vertical" === t.resize ? e.style.resize = "none" : "both" === t.resize && (e.style.resize = "horizontal"), u = "content-box" === t.boxSizing ? -(parseFloat(t.paddingTop) + parseFloat(t.paddingBottom)) : parseFloat(t.borderTopWidth) + parseFloat(t.borderBottomWidth), i()
        }
        function o(t) {
            var o = e.style.width;
            e.style.width = "0px", e.offsetWidth, e.style.width = o, v = t, l && (e.style.overflowY = t), n()
        }
        function n() {
            var t = window.pageYOffset,
                o = document.body.scrollTop,
                n = e.style.height;
            e.style.height = "auto";
            var i = e.scrollHeight + u;
            return 0 === e.scrollHeight ? void(e.style.height = n) : (e.style.height = i + "px", document.documentElement.scrollTop = t, void(document.body.scrollTop = o))
        }
        function i() {
            var t = e.style.height;
            n();
            var i = window.getComputedStyle(e, null);
            if (i.height !== e.style.height ? "visible" !== v && o("visible") : "hidden" !== v && o("hidden"), t !== e.style.height) {
                var r = document.createEvent("Event");
                r.initEvent("autosize:resized", !0, !1), e.dispatchEvent(r)
            }
        }
        var r = void 0 === arguments[1] ? {} : arguments[1],
            d = r.setOverflowX,
            s = void 0 === d ? !0 : d,
            a = r.setOverflowY,
            l = void 0 === a ? !0 : a;
        if (e && e.nodeName && "TEXTAREA" === e.nodeName && !e.hasAttribute("data-autosize-on")) {
            var u = null,
                v = "hidden",
                f = function (t) {
                    window.removeEventListener("resize", i), e.removeEventListener("input", i), e.removeEventListener("keyup", i), e.removeAttribute("data-autosize-on"), e.removeEventListener("autosize:destroy", f), Object.keys(t).forEach(function (o) {
                        e.style[o] = t[o]
                    })
                }.bind(e, {
                    height: e.style.height,
                    resize: e.style.resize,
                    overflowY: e.style.overflowY,
                    overflowX: e.style.overflowX,
                    wordWrap: e.style.wordWrap
                });
            e.addEventListener("autosize:destroy", f), "onpropertychange" in e && "oninput" in e && e.addEventListener("keyup", i), window.addEventListener("resize", i), e.addEventListener("input", i), e.addEventListener("autosize:update", i), e.setAttribute("data-autosize-on", !0), l && (e.style.overflowY = "hidden"), s && (e.style.overflowX = "hidden", e.style.wordWrap = "break-word"), t()
        }
    }
    function n(e) {
        if (e && e.nodeName && "TEXTAREA" === e.nodeName) {
            var t = document.createEvent("Event");
            t.initEvent("autosize:destroy", !0, !1), e.dispatchEvent(t)
        }
    }
    function i(e) {
        if (e && e.nodeName && "TEXTAREA" === e.nodeName) {
            var t = document.createEvent("Event");
            t.initEvent("autosize:update", !0, !1), e.dispatchEvent(t)
        }
    }
    var r = null;
    "undefined" == typeof window || "function" != typeof window.getComputedStyle ? (r = function (e) {
        return e
    }, r.destroy = function (e) {
        return e
    }, r.update = function (e) {
        return e
    }) : (r = function (e, t) {
        return e && Array.prototype.forEach.call(e.length ? e : [e], function (e) {
            return o(e, t)
        }), e
    }, r.destroy = function (e) {
        return e && Array.prototype.forEach.call(e.length ? e : [e], n), e
    }, r.update = function (e) {
        return e && Array.prototype.forEach.call(e.length ? e : [e], i), e
    }), t.exports = r
});
autosize($('#message'));
＆＃13; 
.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 {
    display: flex;
    align-items: flex-end;
}
.form-container .twrap {
    overflow: hidden;
    padding-right: 10px;
    flex-grow: 1;
}
.form-container textarea {
    width: 100%;
    height: 30px;
    line-height: 30px;
    max-height: 120px;
    font-size: 1.2em;
    vertical-align: middle;
    resize : none;
}
.form-container .send {
    padding: 3px;
    height: 30px;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-container">
    <form action="#" method="#" id="form">
        <div class="twrap">
            <textarea name="message" id="message" rows=1></textarea>
        </div>
        <input type="image" src="http://image.noelshack.com/fichiers/2015/34/1439918200-send.png" alt="Send" id="send" class="send" />
    </form>
</div>
＆＃13;
＆＃13;
＆＃13;

Here a working jsfiddle to play with.

答案 3 :(得分：0)

就个人而言，我只会使用表而不是div。表格单元格可以具有vertical-align:bottom CSS值。

<div class='form-container'>
    <form action="#" method="#" id="form">
        <table style='width:100%'>
            <tr>
                <td class="twrap"><textarea name="message" id="message"></textarea></td>
                <td style='vertical-align:bottom'><input type="image" src="http://image.noelshack.com/fichiers/2015/34/1439918200-send.png" alt="Send" id="send" class="send" /></td>
            </tr>
        </table>
    </form>
</div>
相关问题
最新问题