并排div,盒宽为百分比,另一个为固定宽度

时间:2014-01-12 13:25:51

标签: css responsive-design

我尝试为响应式布局创建搜索框,对于搜索按钮,宽度固定为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

1 个答案:

答案 0 :(得分: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 calc

请记住,较低版本的Internet Explorer不支持css3 calc。如果你想支持它包括ie8&amp; ie7你可以使用jQuery。