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应用固定宽度，然后离开中间div以填充空白区域。

以上是您的代码的简化版本。

＆＃13;

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

＆＃13;

<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>

＆＃13;

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>

＆＃13;

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

＆＃13;

<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">
	<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>

＆＃13;

当我调整窗口大小时，如何在行中更改一个元素

2 个答案: