将三个内联元素对齐左，中，右

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;
    }
}

<强> Demo