左边固定宽度div，右边输入框填充剩余空间答案

【问题标题】：Fixed width div on left, fill remaining space with input box on right左边固定宽度div，右边输入框填充剩余空间
【发布时间】：2014-01-19 09:14:18
【问题描述】：

我很好，真的被困住了。我在这里遇到了很多其他类似问题的主题，并且不知道我尝试过多少不同的东西，但似乎没有任何效果......

我正在制作一个 cmets 部分，并希望用户个人资料图片显示在左侧，并在其旁边的剩余空间中填充一个文本框...我显然已经设法让它与固定宽度的 div 一起使用，但我不想那样做。

HTML：

<div class="feed_comments_comment">
    <div class="feed_comments_picture"> 
        <a href="#"><img src="//www.gravatar.com/avatar/?s=25" style="width: 25px;" /></a>
    </div>
    <div class="feed_comments_add">
        <input type="text" class="feed_comment" />
    </div>
</div>

CSS：

.feed_comments_comment {
    float: left;
    width: 100%;
    overflow: hidden;
    background: red;
}
.feed_comments_picture {
    float: left;
    width: 25px;
    background: blue;
}
.feed_comments_add {
    float: left;
    background: green;
    width: 100%;
    margin-right: 25px;
}
.feed_comments_add input {
    width: 100%;
    float: left;
}

JS Fiddle

干杯

【问题讨论】：

标签： html css

【解决方案1】：

一种选择是使用calc：

http://jsfiddle.net/sXMGB/3/

.feed_comments_add {
    float: left;
    background: green;
    width: calc(100% - 25px);
}

IE9+

【讨论】：

哈哈，现在我觉得自己很愚蠢，因为不知道你能做到这一点……这对未来会有很大帮助，谢谢！

【解决方案2】：

试一试：

HTML：

<table cellpadding="0" cellspacing="0" class="feed_comments_comment">
<tr>
    <td class="feed_comment_picture"><a href="#"><img src="//www.gravatar.com/avatar/?s=25"/></a></td>
    <td class="feed_comments_add" align="right"><input type="text" class="feed_comment" /></td>
</tr>
</table>

CSS：

.feed_comments_comment
{
    background: red;
}

.feed_comments_picture
{
    background: blue;
    width: 25px;
}

.feed_comments_picture img
{
    width: 25px;
}

.feed_comments_add
{
    background: green;
    width:100%;
}

.feed_comments_add input
{
    margin-right: 25px;
}

【讨论】：

您需要输入宽度为 100%。