logo标签列表

保持浮动元素在底部

htmlcss
4
这是我的代码：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键，图片也能保持在
4个回答
3
你需要将 .send 放置在 position: absolute; bottom:10px; right:15px 中，并设置文本区域的宽度，以确保它们不重叠。这是你 JsFiddle 的更新链接：https://jsfiddle.net/a4Le1jkz/1/。编辑：这里有一个更新：https://jsfiddle.net/a4Le1jkz/7/，我将文本区域的 width 设置为 100%，并在 .twrap 中添加了 padding-right，使右侧的图片能够正确显示。
1
当您调整窗口大小时，文本区域和图像会重叠。 - Neabfi
设置文本区域的width并不是很有用，因为它应该是图像宽度的100%。你可以使用CSS calc()来解决这个问题，但很多浏览器不支持它。 - Sebastian Simon
2

您是否坚持使用float: right，或者您愿意尝试使用display: inline-block;。通过一些微调，我成功地使用了display选项。

/*!
 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'));
.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;
}
<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:
将
移到了输入框之前。
CSS:
向.form-container .twrap CSS添加了display: inline-block;和width: 90%。
向.form-container .send CSS 添加了display: inline-block;和vertical-align: bottom;。此外也从这个CSS中删除了float: right;。
这是一个不错的解决方案，但在不同的分辨率上效果可能不太好。我认为采用绝对定位的解决方案在这种情况下提供了最大的灵活性。 - Mihai Vilcu
2
使用flexbox，您可以轻松地实现以下内容： 

/*!
 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'));
.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.

我不是那个点踩的人，这对我来说似乎是一个强大的解决方案。我猜测，点踩的原因可能是 flexbox 技术的浏览器支持不够广泛。 - Sebastian Simon
@Xufox 我认为这并不是一个让回答遭受负评的理由，可以查看此链接以了解浏览器支持情况：https://css-tricks.com/snippets/css/a-guide-to-flexbox/#browser-support，所有现代浏览器都支持它。 - Yandy_Viera
你链接的表格中没有显示出来，但是IE10仅支持基于2012标准的_flex box layout module_的部分实现。参考。 在我看来，这仍然不是反对答案的理由。 - War10ck
@Yandy_Viera 嗯...IE一如既往地有点难搞...但除此之外，我也不确定为什么你被踩了。我实际上给你点了赞...但你已经得到了3个赞。目前还没有什么可担心的。 - Sebastian Simon
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>
1
虽然这样可能可行，但请记住，表格是用于制作表格数据而非布局的。 - War10ck
应该使用CSS表格而不是HTML表格。 - Oriol
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接