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

Answer 1

您需要创建一个新的 block formatting context通过将文本区域包装在一个元素中，例如 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 example