Css 右侧有图像的流体宽度div

请看一下我的小提琴：

我希望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;    
 }

.theDiv输入{
宽度：100%；
高度32px；
边界=1像素固体；
边界半径：6px；
}
第四章{
显示：内联；
}

关于检查窗口是否已调整大小。请参阅此资源

解决方案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;   
}

---

​

这里有一种使用背景图像的方法：

HTML

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

---

​

还是不行。输入div运行到图像中。这不是我想要的。我的解决方案不是你需要的？

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

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