讓容器填充剩余的空間，同時在內部保留左浮動塊和右浮動塊

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; width: 75px; height: 75px; -moz-border-radius: 37.5px; -webkit-border-radius: 37.5px; 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;
}