將三個內聯元素對齊到左，中和右

Question

我正在嘗試構建一個浮動底部菜單，該菜單可用於多個屏幕結果。 到目前為止，我無法使三個獨立元素在左，中和右位置對齊。

這是在寬屏幕上看起來應該是這樣的：

在移動屏幕上（最壞的情況）：

在移動屏幕上（最佳情況）：

這是我所擁有的JSFiddle： http : //jsfiddle.net/ZYw6a/

我嘗試使用： display: inline-block; 關於孩子，以及對父母和孩子的對齊方式的不同組合。 它只是使工具欄看起來像是星箱。 設定height: 0; 也沒有太大幫助。 即使所有內容都是內聯的，調整大小也會導致項目重疊。

我有使用表的瘋狂想法。我不想嘗試。 有一個更好的方法嗎？

Answer 1

您可以使用display: table-cell像表單元格一樣顯示div：

HTML

<div class="container">
    <div class="left">Div with text Buttons</div>
    <div class="middle">Div with span Image sprite</div>
    <div class="right">Div with textarea Search field</div>
</div>

CSS

.container {
    display: table;
    width: 100%;
}
.container .left, 
.container .middle, 
.container .right {
    display: table-cell;
    padding: 10px;
}
.container .left {
    color: #9AD0E5;
    background: #3F48CC;
    width: 200px;
}
.container .middle {
    color: #3F48CC;
    background: #FF7F27;
}
.container .right {
    color: #A349A4;
    background: #880015;
    width: 200px;
}

@media screen and (max-width: 480px) {
    .container .left, 
    .container .middle, 
    .container .right {
        display: block;
        margin: 10px auto;
    }
}

演示