當我調整窗口大小時，如何在一行中更改寬度中的一個元素

Question

我正在查看overstock.com並且他們有一行徽標，搜索欄和幾個圖標都在一個div中。但是，當您調整窗口大小時，更改寬度的唯一元素就是搜索欄。在我的example中，我嘗試複製它，但每當我點擊某個窗口寬度時，其中有4個圓圈的部分將從容納所有內容的容器中退出。有沒有辦法只調整一個元素的大小，當窗口調整大小的CSS？

編輯：這是不一樣的可能重複的另一個問題。主要原因是，在我的問題中，一行中有三個部分，我試圖隻影響中間部分來調整大小。另一個問題是如何只用兩個部分填充剩餘空間。除了他們只想要正確的部分佔據剩餘的空間。這不是我想要做的，我只是想中段，當我調整窗口的大小來調整

CSS

.container { 
    border:1px solid grey; 
    height:60px; 
    margin: 15px auto; 
    position:relative; 

} 

.container.a > div { 

} 

#search input { 
    width:auto; 
    border-radius:5px; 
    border-color:grey; 
    width:100%; 
} 

.icon { 
    background:crimson; 
    border-radius:50%; 
    height:60px; 
    width:60px; 
    display:inline-block; 
} 

#icon-set { 
    margin-left:15px; 
} 

#icon-set:after { 
    display:table; 
    content:""; 
    clear:both; 
} 

.log { 
    font-size:36px; 
    font-weight:bold; 
    margin-right:15px; 
} 

.search-bar { 
    max-width:700px; 
    width:100%; 
    position:relative; 
    max-height:35px; 
    align-self:center; 
} 

.search-bar form { 
    width:inherit; 
    padding-right:52px; 
} 

.inp { 
    width:inherit; 
    height:35px; 

} 

.but { 
    position:absolute; 
    right:0; 
    width:52px; 
    height:35px; 
    background:crimson; 
    color:white; 
    border-style:none; 
    top:0; 
} 

Answer 1

一種方法是將你的佈局div視爲表格單元格。對左側的徽標和右側的圖標div應用固定寬度，然後離開中間區域以填充空白區域。

下面是上述代碼的簡化版本。

.container { 
 
     display:table; 
 
     border:1px solid grey; 
 
     height:60px; 
 
     margin: 15px auto; 
 
     position:relative; 
 
    } 
 
    .log { 
 
     display:table-cell; 
 
     width:100px; 
 
     background:blue; 
 
     font-size:36px; 
 
     font-weight:bold; 
 
     margin-right:15px; 
 
    } 
 
    .search-bar { 
 
     display:table-cell; 
 
     position:relative; 
 
     max-height:35px; 
 
     align-self:center; 
 
    } 
 
    #icon-set{ 
 
     display:table-cell; 
 
     width:200px; 
 
     background:red; 
 
    }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="container"> 
 
    <div class="log">logo</div> 
 
    <div class="search-bar"> 
 
    <div class="input-group"> 
 
     <input type="text" class="form-control" placeholder="Search for..."> 
 
     <span class="input-group-btn"> 
 
     <button class="btn btn-default" type="button">Go!</button> 
 
     </span> 
 
    </div> 
 
    <!-- /input-group --> 
 
    </div> 
 
    <div id="icon-set"></div> 
 
</div>

Answer 2

<div class="container a"> 
    <div class="row"> 
     <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3"> 
       <div class="log">Logo</div> 
     </div> 
     <div class="col-xs-12 col-sm-9 col-md-9 col-lg-9"> 
      <div class="search-bar"> 
       <form > 
       <input type="text" class="inp" /> 
       <button class="but fa fa-search"></button> 
       </form> 
      </div> 
      <div id="icon-set" > 
       <div class="icon"></div> 
       <div class="icon"></div> 
       <div class="icon"></div> 
       <div class="icon"></div> 
      </div> 
      </div> 
    </div> 
</div> 

.form_section { 
 
width:100%; height:auto; margin:0px; padding:10px; border:1px solid #ddd; 
 
} 
 
.log{ 
 
font-size:36px; font-weight:bold; margin-right:15px; 
 
} 
 
.search-bar{ 
 
float:left; width:48%; position:relative; max-height:35px; align-self:center; 
 
} 
 
.inp{ 
 
width:80%; height:35px; border-radius:5px 0px 0px 5px; border:1px solid #ddd; margin:0px; padding:5px 10px; float:left; 
 
} 
 
.but{ 
 
width:52px; height:35px; background:crimson; color:white; border-style:none; float:left; 
 
} 
 
.icon{ 
 
background:crimson; border-radius:50%; height:40px; width:40px; display:inline-block; margin:0px; padding:0px; 
 
} 
 
#icon-set{ 
 
margin-left:15px; float:right; 
 
} 
 
#icon-set:after { 
 
display:table; content:""; clear:both; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
<div class="container"> 
 
\t <div class="form_section"> 
 
     <div class="row"> 
 
       <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3"> 
 
        <div class="log">Logo</div> 
 
       </div> 
 
       <div class="col-xs-12 col-sm-9 col-md-9 col-lg-9"> 
 
        <div class="search-bar"> 
 
         <form > 
 
          <input type="text" class="inp" /> 
 
          <button class="but fa fa-search"></button> 
 
         </form> 
 
        </div> 
 
        <div id="icon-set" > 
 
        <div class="icon"></div> 
 
        <div class="icon"></div> 
 
        <div class="icon"></div> 
 
        <div class="icon"></div> 
 
        </div> 
 
       </div> 
 
     </div> 
 
    </div> 
 
</div>