您可以使用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％，这将迫使所有其他元素计算出缩小以适合的宽度，搜索栏将展开以填充其余空间。
根据需要在表格单元格中使用文本对齐和垂直对齐。
