我的頭橫幅由塊作爲這樣具有容器填充剩餘的空間,同時具有左浮動和右內浮動
標誌寬度和高度已知。橫幅採用徽標的高度。剩下的將是餘下的百分比。該消息填充剩餘空間並浮動。搜索欄和配置文件空間右移。所有元素都垂直居中。
這是我的可怕嘗試。我到目前爲止所嘗試的每個解決方案都有意想不到的後果。
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/
這真的好像已經做到了。我曾用其他方式試驗過彈性盒,但無濟於事。謝謝。 –
我很高興我能幫上忙。 –