内联显示元素，与窗口大小无关答案

【问题标题】：Display elements inline irrespective of window size内联显示元素，与窗口大小无关
【发布时间】：2013-08-19 14:14:27
【问题描述】：

我需要并排显示一个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 小提琴link

【问题讨论】：

你试过减小textarea的宽度吗？
是的，我做到了，它们确实是内联的，但在调整窗口大小时它们不会保持内联。

标签： html css

【解决方案1】：

您需要创建一个新的block formatting context，方法是将您的 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 example

【讨论】：

这是一个很好的解决方案，我自己也使用过很多次。如果图像宽度可以改变肯定会更好。由于textarea:focus 发生了什么，我没有在这种情况下发布它，例如加剧问题：jsfiddle.net/thirtydot/ACszc/26。解决这个问题的最简单方法是添加一些填充。

【解决方案2】：

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

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;
}

【讨论】：

我更喜欢这个，因为它不会添加不必要的额外标记来完成工作。
这有问题，当调整大小时，文本区域保持内联，但它的宽度不会减小以适应窗口大小。您可以在一个简单的 html 文件中进行尝试。 :)
@ManishKumar：当然可以。这是一个“简单的 HTML 文件”：jsfiddle.net/thirtydot/ACszc/22/show。你必须在你的页面上做一些不同的事情。这是float: left; width: 100% 在.wrapper 上工作的版本，正如您在问题中所说的那样：jsfiddle.net/thirtydot/ACszc/28。我最初删除了这些属性，因为我看不到它们在为您做什么；它们似乎没用。
我明白了，确实如此。我的错。

【解决方案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;
}

【讨论】：

可能是因为某些元素中的填充。不过不确定..我想在这种情况下百分比计算必须非常严格

【解决方案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>

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

【讨论】：