将三个内联元素对齐到左侧，中间和右侧

我正在尝试构建可用于多个屏幕结果的浮动底部菜单。到目前为止，我无法让这三个独立的元素在左边，中间和右边对齐。将三个内联元素对齐到左侧，中间和右侧

这是它应该看起来像宽屏幕上的内容：

Wide screen

在移动屏幕（最坏的情况下）：

On mobile screen

在移动屏幕（最好情况下）：

No mobile screen

这里是我所拥有的jsfiddle：http://jsfiddle.net/ZYw6a/

我尝试使用：display: inline-block;对儿童和家长和儿童排列的不同组合。它只是让工具栏看起来像明星。设置height: 0;也没有多大帮助。即使所有内容都是内联的，调整大小会导致项目重叠。

我有使用表的这种疯狂的想法..我不想尝试。有一个更好的方法吗？

来源

2014-01-19 Xeos

您可以使用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

来源

2014-01-19 23:23:21 3dgoo

将三个内联元素对齐到左侧，中间和右侧

回答

相关问题