具有响应宽度的包装器中的实体和响应

Question

我正在开发一个响应式应用程序，我需要搜索栏的某些部分具有响应宽度，而另一些则没有（例如搜索图标）。

我试过这样做

.wrapper{
    width:80%;
    height:auto;
    border-bottom:solid 5px red;
}
.solid{
    width:50px;
    height:50px;
    background-color:green;
}
.responsiv{
    width:100%;
    height:50px;
    background-color:yellow;
}

<div class="wrapper">
    <div class="solid"></div>
    <div class="responsiv"></div>    
</div>

但我希望它看起来像这样但响应迅速。

.wrapperWant{
    width:912px;
    height:auto;
    border-bottom:solid 5px red;
}
.solidWant{
    width:50px;
    height:50px;
    background-color:green;
    float:left;
}
.responsivWant{
    float:left;
    width:862px;
    height:50px;
    background-color:yellow;
}


.clear{
    clear:both;
}

<div class="wrapperWant">
    <div class="solidWant"></div>
    <div class="responsivWant"></div>    
    <div class="clear"></div>
</div>

Answer 1

.wrapper{
    width:80%;
    height:50px;
    border-bottom:solid 5px red;
    margin-left:50px;
}
.solid{
    width:50px;
    height:50px;
    background-color:green;
    float:left;
    margin-left:-50px;
  border-bottom:solid 5px red;
}
.responsiv{
    width:100%;
    height:50px;
    background-color:yellow;
    float:left;
}
   .clear
   {
width:0; height:0; clear:both;}

<div class="wrapper">
    <div class="solid"></div>
    <div class="responsiv"></div>
    <div class="clear"></div>   
</div>

具有响应宽度的包装器中的实体和响应

Solid and Responsive in an wrapper which has an Responsive width

html

css

responsive-design