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

Question

我正在尝试构建一个适用于多屏幕结果的 float 底部菜单。到目前为止，我无法使三个独立的元素在左、中、右位置对齐。

这是它在宽屏上的样子:

在移动屏幕上(最坏的情况):

在移动屏幕上(最佳情况):

这是我拥有的 JSFiddle:http://jsfiddle.net/ZYw6a/

我尝试使用:display: inline-block; 在 child 身上，以及在 parent 和 child 身上使用不同的对齐组合。它只会使工具栏看起来像 starcase。设置 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