左側固定寬度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，右側輸入框填充剩餘空間

回答

相關問題