并列div与框宽度百分比和另一个固定宽度

Question

我尝试创建搜索框为响应布局，搜索按钮的宽度固定为52px，但对于输入宽度应为100％。

<div class="btn_box">Search</div> 
<div class="search_box"> 
    <input type="text" value="Search"> 
</div> 

.search_box { 
    border: 1px solid #000000; 
} 
.btn_box { 
    background-color: #5D85D0; 
    border: 1px solid #DDDDDD; 
    color: #FFFFFF; 
    float: right; 
    padding: 3px; 
    position: relative; 
    text-align: center; 
    width: 52px; 
} 
input { 
    width:88%; 
    padding:5px; 
    -webkit-box-sizing: border-box; 
    /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; 
    /* Firefox, other Gecko */ 
    box-sizing: border-box; 
} 

现在，当我调整输入框的大小将下降。您可以点击这里JSFiddle

Answer 1

.search_box { 
    border: 1px solid #000000; 
} 
.btn_box { 
    background-color: #5D85D0; 
    color: #FFFFFF; 
    float: right; 
    position: relative; 
    text-align: center; 
    width: 52px; 
    border: none; 
    outline: none; 
} 
input { 
    width: -moz-calc(100% - 52px); 
    width: -webkit-calc(100% - 52px); 
    width: -o-calc(100% - 52px); 
    width: calc(100% - 52px); 
    border: none; 
    outline: none; 
} 

<div class="btn_box">Search</div> 
<div class="search_box"> 
    <input type="text" value="Search"> 
</div> 

使用CSS3钙

请记住，CSS3计算未在较低版本的Internet Explorer的支持。如果你想支持交叉浏览器，包括ie8 & IE7，你可以使用jQuery。