保持底部的浮動元素

Question

有我的代碼：​​。

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; 
} 

我想保持圖像的textarea的底部，即使用戶按下輸入。 textearea必須繼續調整其寬度。

圖像浮動，所以我不知道如何保持它在底部。

Answer 1

你必須把.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等於我在正確的需要圖像的地方。

Answer 2

就個人而言，我只是使用表格而不是divs。表格單元格可以有一個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> 

Answer 3

您使用float: right設置或者你會開到display: inline-block;。稍微調整一下，我就可以使用display選項來實現這個功能。

/*! 
 
\t Autosize 3.0.8 
 
\t license: MIT 
 
\t 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'));

.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; 
 
} 
 
\t \t 
 
.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; 
 
}

<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>

以下改變：

HTML：

的<div class="twrap">被輸入之前移動。

CSS：

display: inline-block;和width: 90%添加到.form-container .twrap CSS。

display: inline-block;和vertical-align: bottom;被添加到.form-container .send CSS。另外，float: right;也從此CSS中刪除。

Answer 4

使用Flexbox的你會很容易達到你想要的東西是這樣的：

/*! 
 
\t Autosize 3.0.8 
 
\t license: MIT 
 
\t 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'));

.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; 
 
}

<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>

Here a working jsfiddle to play with.