Выравнивание трех встроенных элементов слева, по центру и справа

Question

Выравнивание трех встроенных элементов слева, по центру и справа

0

Я пытаюсь создать плавающее нижнее меню, которое будет работать для нескольких скриншотов. До сих пор мне не удалось сделать три независимые элемен- ты в левой, средней и правой частях.

Вот как это должно выглядеть на широком экране:

На экране мобильного телефона (в худшем случае):

На мобильном экране (лучший сценарий):

Вот JSFiddle того, что у меня есть: http://jsfiddle.net/ZYw6a/

Я попытался использовать: display: inline-block; на детей и различные комбинации выравнивания по родителям и детям. Это только сделало панель инструментов похожей на камеру. height: 0; установки height: 0; тоже не помогли. Несмотря на то, что все было встроено, изменение размера привело к перекрытию элементов.

У меня была эта дикая идея использовать таблицу. Я не хочу попробовать. Есть лучший способ сделать это?

Xeos 20 янв. 2014, в 00:42

Источник

Теги:

html

css

1 ответ

Ещё вопросы

3dgoo · Accepted Answer · 2014-01-19T21-24-00.000Z

Вы можете использовать display: table-cell для отображения ваших divs, таких как ячейки таблицы:

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

демонстрация