无论窗口大小如何，都内联显示元素

Question

我需要并排显示一个image和一个textarea。它们应该始终并排放在一起并沿窗口的整个宽度展开，即使窗口调整大小（有点响应）。图像应该具有固定的大小，并且textarea应该占据全长直到最右边。重新调整窗口大小时，textarea的宽度应重新调整大小以适合图像内嵌。以下是我的代码：

//html
<div class="wrapper">
    <img width="30" height="30" alt="you" class="pic" src="http://www.frontiersin.org/Design/Images/default_profile.jpg"/>
    <textarea class="txt"></textarea>
</div>

//css
.wrapper {
    width : 100%;
    display : inline;    
}    

.pic {
    float : left;   
}

.txt {
    width : 100%;
    float : left;  
    height: 30px
}

这是一个js小提琴link

Answer 1

如果图像的大小永远不会改变，这是一个很好的解决方案：

http://jsfiddle.net/thirtydot/ACszc/22/

.wrapper {
    padding-left: 36px;
    position: relative;
}
.pic {
    position: absolute;
    top: 0;
    left: 0;
}
.txt {
    width: 100%;
    height: 30px;
    -moz-box-sizing: border-box;
         box-sizing: border-box;
}

Answer 2

您需要通过将textarea包装在类似span的元素中并使用此CSS来创建新的block formatting context：

.wrapper {
    width : 100%;
    display : inline;
    float: left;
}
.pic {
    float : left;
    width:30px;
}
.txt {
    width : 100%;
    height: 30px;
}
span {
    display: block;
    overflow: hidden;
    padding: 0 4px 0 6px
}

<强> jsFiddle example

Answer 3

检查this。

可能将百分比和高度设置为自动的宽度可能有所帮助。

.wrapper {
    width : 100%;
    display : block; 
    float: left
}


.pic {
    float : left; 
    width:3%;
    height: auto;
    line-height: 100%;
}

.txt {
    width : 95%;
    float : left;  
    height: 30px;
}

Answer 4

在处理INPUT时，使用表格有时非常有效，即使非常难看。 此外，它不应该与任何浏览器混淆：

<table style="width:100%;">
<tr>
    <td style="width:40px;">
        <img width="30" height="30" alt="you" class="pic" src="http://www.frontiersin.org/Design/Images/default_profile.jpg"/></td>
    <td style="width=100%;">
    <textarea class="txt"></textarea>
    </td>
</tr>
</table>

当其他解决方案无法帮助您时，请考虑一下。