CSS填充剩余宽度

CSS填充剩余宽度

您可以使用CSS表格单元格实现此布局。

稍微修改您的HTML，如下所示：

<div id="header">    <div >        <div > <img src="http://placehold.it/50x40" />        </div>        <div id="searchBar"> <input type="text" />        </div>        <div  id="myAccount">My Account</div>        <div  id="basket">Basket (2)</div>    </div></div>

只需删除两个

.button

元素周围的wrapper 元素即可。

应用以下CSS：

#header {    background-color: #323C3E;    width:100%;}.container {    display: table;    width: 100%;}.logoBar, #searchBar, .button {    display: table-cell;    vertical-align: middle;    width: auto;}.logoBar img {    display: block;}#searchBar {    background-color: #FFF2BC;    width: 90%;    padding: 0 50px 0 10px;}#searchBar input {    width: 100%;}.button {    white-space: nowrap;    padding:22px;}

适用

display: table

于

.container

并给它100％的宽度。

对于

.logoBar

，

#searchBar

，

.button

，适用

display: table-cell

。

对于

#searchBar

，将宽度设置为90％，这将迫使所有其他元素计算出缩小以适合的宽度，搜索栏将展开以填充其余空间。

根据需要在表格单元格中使用文本对齐和垂直对齐。