css - 右側の画像を含む流体幅 div

Question

私のフィドルを見てください：

http://jsfiddle.net/gX5r9/

ブラウザのサイズが変更された場合にdivの幅を100％にしたいのですが、アイコン画像をその右側に配置したいのです。

 <div class="theDiv">
     <input type="text" /><img src="http://images.ilias.ca/Firefox-32x32.png" />
 </div>


.theDiv input {
 width:100%;
 height 32px;
 border= 1 px solid;
 border-radius: 6px;    
 }

 .theDiv img{
  display: inline;    
 }

Answer 1

背景画像を使用してこれを行う1つの方法は次のとおりです。jsFiddleの例

HTML

<div class="theDiv">
    <input type="text" />
</div>

</ p>

CSS

.theDiv input {
   height:32px;
   border: 1px solid  #999;
   border-radius: 6px;    
   width:100%;
   vertical-align:bottom;
}
.theDiv {
    background:url(http://images.ilias.ca/Firefox-32x32.png) 100% 0% no-repeat;
    padding-right:38px;
    height:40px;
}

</ p>

Answer 2

.theDiv input {
   width:100%;
   height 80px;
   border= 1 px solid;
   border-radius: 6px; 
   padding-top:10px;
   padding-bottom:10px;   
   display:block;  
   background-image:url(http://images.ilias.ca/Firefox-32x32.png);  
   background-repeat:no-repeat;
   background-position:right center;

}

ウィンドウのサイズが変更されたかどうかの確認について。このリソース@mediaを参照してください

解決策 2

.theDiv {
  height:32px;
  position:relative;
}
.theDiv input {
   width:100%;
   height 32px;
   border= 1 px solid;
   border-radius: 6px;    
}

.theDiv img{
    position:absolute;
    z-index:666;
    right:10px;   
}

</p>