Question

我很好，真的卡住了。我已经在这里遇到了很多其他类似问题的主题，并且忘记了我尝试了多少不同的东西，但似乎没有什么可以做的......

我正在制作评论部分，并希望用户个人资料图片显示在左侧，文本框填充其旁边的剩余空间...我显然设法让它使用固定宽度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

干杯

Answer 1

一种选择是使用calc：

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

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

IE9+

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

固定宽度div在左边，用右边的输入框填充剩余空间

2 个答案: