Создайте текучую среду элемента ввода и возьмите оставшееся свободное пространство с двумя фиксированными элементами в одном ряду

Question

Как я могу сделать поле ввода жидким и заняться оставшимся пространством посередине?

У меня есть два элемента фиксированного размера, один слева и один справа.

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

Спасибо.

jsfiddle:http://jsfiddle.net/FXeyr/1/

HTML код:

<div class="wrapper"> 
<div class="yellow"> 
    left 
</div> 
<div class="blue"> 
    right 
</div> 
<input class="green"> 
</input> 
</div> 

CSS:

.yellow 
{ 
width: 50px; 
float: left; 
background-color: yellow; 
} 

.blue 
{ 
    width: 50px; 
    float: right; 
    background-color: blue; 
} 

.green 
{ 
} 

P.S. Я пытаюсь сделать это с чистым css.

Answer 1

Вы можете попробовать что-то вроде этого:

.yellow { 
    position: absolute; 
    left: 0; 
    width: 50px; 
    background-color: yellow; 
} 
.blue { 
    position: absolute; 
    right: 0; 
    width: 50px; 
    background-color: blue; 
} 
.green { 
    width: 100%; 
} 
.wrapper { 
    outline: 1px dotted red; 
    position: relative; 
    padding: 0 50px; 
} 

Fiddle: http://jsfiddle.net/audetwebdesign/ADdDE/

Вам нужен .wrapper, содержащего блока, в котором вы установили левую и правая обивку для размещения два расположенных (желтых/синих) элементов.

Элемент input (зеленый) имеет ширину 100%, поэтому он заполняет пространство, за исключением прокладки слева и справа.

Затем вы используете абсолютное позиционирование для размещения двух других элементов. Поскольку вы указали свою ширину, вы знаете, сколько отступов нужно использовать.

Примечание
Входной элемент имеет границу, ширина которой может варьироваться между браузерами, поэтому, вы можете увидеть небольшое изменение среди браузеров. Если вы делаете снимок экрана и подсчитываете пиксели, вы можете видеть, что центрирование не является идеальным, но для простоты кодирования оно работает достаточно хорошо.