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

.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>

Answer 2

这是使用背景图像执行此操作的一种方法：jsFiddle example

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>