float左右，中间自适应，和一些tips

<div class="reply-wrapper">    <span class="reply-logo"></span>    <span class="reply-btn" id="subjectQuickReplyBtn">回复</span>    <div class="out-input">        <input type="text" class="reply-input" id="subjectQuickReply" placeholder="请输入评论内容"/>    </div></div>

实现如下图这样的效果： 

需要注意的有下面几个地方：
（1）input属于inline-block类型，宽度包括内容，这时候要给它设置为width：100%；就需要在它的外层包一层div，让div的宽度是width：atuo，这样中间部分就看自适应了。

（2）‘reply-logo’和‘reply-btn’两个float元素时挨在一起的，并没有在‘out-input’的上下两侧，也就是下面这个样子：

<span class="reply-logo"></span>    <div class="out-input">        <input type="text" class="reply-input" id="subjectQuickReply" placeholder="请输入评论内容"/>    </div><span class="reply-btn" id="subjectQuickReplyBtn">回复</span>

这是因为float属于inline的文档流，它们挨在一起和后面的div会排在同一行上，但是如果写在了div的两侧，div属于block文档流，就会截断上面的inline文档流，从而产出换行，也就是BUTTON就会跑到input的下一行去。

Some Tips

chrome下当img的src为空时，会产生一个白色的边框，如何解决这个问题，可以考虑用下面的方法：

img[src=""]{    opacity: 0;}

当图片资源为空时，透明度度设置为0，这样就不会有那个白色的边框了。