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

我很好，真的卡住了。我已经经历了很多的其他议题了在这里的类似问题，失去的，我有多少不同的东西尝试，但似乎没有任何做的伎俩个性化......左侧固定宽度div，右侧输入框填充剩余空间

我正在做一个注释部分，并希望用户的个人资料图片显示在左侧，有一个文本框填充沿侧它的剩余空间......我明明设法得到它与固定宽度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

干杯

来源

2014-01-19 tehchimp

一种选择是使用calc：

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

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

IE9+

来源

2014-01-19 01:07:35

哈，现在我觉得合适的愚蠢，不知道你可以做到这一点...这将在未来帮助很多，谢谢！ – tehchimp

尝试表：

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

来源

2014-01-19 01:14:18 TheSavage

您需要输入宽度为100％。 –

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

回答

相关问题