Question

请看看我的小提琴：

如果浏览器调整大小，我希望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;   
}

Answer 2

以下是使用背景图片执行此操作的一种方法： jsFiddle example

<强> HTML

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

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

流体宽度div，右侧是图像

2 个答案: