具有容器填充剩餘的空間，同時具有左浮動和右內浮動

Question

我的頭橫幅由塊作爲這樣

標誌寬度和高度已知。橫幅採用徽標的高度。剩下的將是餘下的百分比。該消息填充剩餘空間並浮動。搜索欄和配置文件空間右移。所有元素都垂直居中。

這是我的可怕嘗試。我到目前爲止所嘗試的每個解決方案都有意想不到的後果。

HTML

.top-banner { 
 
    position:fixed; 
 
    width:100%; 
 
    height:115px; 
 
} 
 

 
.top-banner .logo { 
 
    float:left; 
 
    display:inline-block; 
 
    width:255px; 
 
    height:115px; 
 
    background-color:red; 
 
} 
 
.user-status { 
 
    display:inline-block; 
 
    float:left; 
 
} 
 
.search-bar { 
 
    width:30%; 
 
    float:right; 
 
} 
 
.user-profile { 
 
    float:right; 
 
    background:blue; 
 
    \t width: 75px; 
 
\t height: 75px; 
 
\t -moz-border-radius: 37.5px; 
 
\t -webkit-border-radius: 37.5px; 
 
\t border-radius: 37.5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="top-banner"> 
 
    <div class="logo"> 
 

 
    </div> 
 
    <div class="user-status"> 
 
     <span>You have 29 days left to your trial</span> 
 
    </div> 
 
    <div class="search-bar input-group"> 
 
     <input name="search" class="form-control" placeholder="Search"> 
 
     <span class="input-group-addon"> 
 
      <button type="submit"> 
 
       <span class="glyphicon glyphicon-search"></span> 
 
      </button> 
 
     </span> 
 
    </div> 
 
    <div class="user-profile"> 
 
    </div> 
 
</div>

這裏的的jsfiddle https://jsfiddle.net/xu17j585/6/

Answer 1

您可以使用Flexbox與media queries設置爲min-width: 768什麼的。

.top-banner { 
 
    position: fixed; 
 
    width: 100%; 
 
    height: 115px; 
 
} 
 
.top-banner .logo { 
 
    width: 255px; 
 
    height: 115px; 
 
    background-color: red; 
 
} 
 
.user-status { 
 
    flex: 1; 
 
} 
 
.search-bar { 
 
    width: 30%; 
 
} 
 
.user-profile { 
 
    background: blue; 
 
    width: 75px; 
 
    height: 75px; 
 
    border-radius: 37.5px; 
 
} 
 
@media(min-width: 768px) { 
 
    .top-banner { 
 
    display: flex; 
 
    align-items: center; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="top-banner"> 
 
    <div class="logo"></div> 
 
    <div class="user-status"><span>You have 29 days left to your trial</span> 
 
    </div> 
 
    <div class="search-bar input-group"> 
 
    <input name="search" class="form-control" placeholder="Search"> 
 
    <span class="input-group-addon"> 
 
     <button type="submit"> 
 
     <span class="glyphicon glyphicon-search"></span> 
 
    </button> 
 
    </span> 
 
    </div> 
 
    <div class="user-profile"> 
 
    </div> 
 
</div>

Answer 2

這裏是Flexbox的溶液。如果我正確地理解了你，你總想留下標誌和用戶狀態，並將輸入和用戶配置文件留下。

<div class="top-banner"> 
    <div>  
     <div class="logo"></div> 
     <div class="user-status"><span>You have 29 days left to your trial</span></div> 
    </div> 
    <div> 
     <div class="search-bar input-group"> 
       <input name="search" class="form-control" placeholder="Search"> 
       <span class="input-group-addon"> 
        <button type="submit"> 
         <span class="glyphicon glyphicon-search"></span> 
        </button> 
       </span> 
     </div> 
     <div class="user-profile"></div> 
    </div> 
</div> 

.top-banner { 
    position:fixed; 
    width:100%; 
    height:115px; 
} 

.top-banner .logo { 
    float:left; 
    display:inline-block; 
    width:255px; 
    height:115px; 
    background-color:red; 
} 
.user-status { 
    display:inline-block; 
    float:left; 
} 
.search-bar { 
    width:30%; 
    float:right; 
} 
.user-profile { 
    float:right; 
    background:blue; 
    width: 75px; 
    height: 75px; 
    -moz-border-radius: 37.5px; 
    -webkit-border-radius: 37.5px; 
    border-radius: 37.5px; 
}