html - 内联显示元素，与窗口大小无关

Question

我需要并排显示一个image和一个。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小提琴链接

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来创建新的块格式化上下文：

.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 示例

Answer 3

看看这个。

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

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

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