Оставшаяся ширина заполнения CSS

У меня есть эта строка заголовка.

<div id="header">
        <div class="container">
            <img src="img/logo.png"/>
            <div id="searchBar">
                <input type="text" />
            </div>
            <div class="buttonsHolder">
                <div class="button orange inline" id="myAccount">
                    My Account
                </div>
                <div class="button red inline" id="basket">
                    Basket (2)
                </div>
            </div>

        </div>
    </div>

Мне нужен searchBar, чтобы заполнить все оставшиеся пробелы в div. Как мне это сделать?

Вот мой CSS

#header { 
    background-color: #323C3E;
    width:100%;
}

.button {
    padding:22px;
}


.orange {
    background-color: #FF5A0B;
}

.red {
    background-color: #FF0000;
}

.inline { 
    display:inline;
}

#searchBar {
    background-color: #FFF2BC;
}

Ответ 1

Вы можете реализовать этот макет с помощью табличных ячеек CSS.

Измените свой HTML немного следующим образом:

<div id="header">
    <div class="container">
        <div class="logoBar">
            <img src="http://placehold.it/50x40" />
        </div>
        <div id="searchBar">
            <input type="text" />
        </div>
        <div class="button orange" id="myAccount">My Account</div>
        <div class="button red" id="basket">Basket (2)</div>
    </div>
</div>

Просто удалите элемент оболочки вокруг двух элементов .button.

Примените следующий CSS:

#header {
    background-color: #323C3E;
    width:100%;
}
.container {
    display: table;
    width: 100%;
}
.logoBar, #searchBar, .button {
    display: table-cell;
    vertical-align: middle;
    width: auto;
}
.logoBar img {
    display: block;
}
#searchBar {
    background-color: #FFF2BC;
    width: 90%;
    padding: 0 50px 0 10px;
}

#searchBar input {
    width: 100%;
}

.button {
    white-space: nowrap;
    padding:22px;
}

Примените display: table к .container и дайте ему 100% ширину.

Для .logoBar, #searchBar, .button примените display: table-cell.

Для #searchBar установите ширину на 90%, что заставляет все остальные элементы вычислять ширину усадки для соответствия, а панель поиска будет расширяться, чтобы заполнить оставшуюся часть пространства.

При необходимости используйте выравнивание по вертикали и выравнивание по вертикали в ячейках таблицы.

См. демонстрацию по адресу: http://jsfiddle.net/audetwebdesign/zWXQt/

Ответ 2

Используйте calc!

https://jsbin.com/wehixalome/edit?html,css,output

HTML:

<div class="left">
  100 px wide!
  </div><!-- Notice there isn't a space between the divs! *see edit for alternative* --><div class="right">
    Fills width!
  </div>

CSS

.left {
  display: inline-block;
  width: 100px;

  background: red;
  color: white;
}
.right {
  display: inline-block;
  width: calc(100% - 100px);

  background: blue;
  color: white;
}

Обновление. В качестве альтернативы отсутствию пробела между divs вы можете установить font-size: 0 на внешний элемент.

Ответ 3

Включите изображение в div searchBar, он выполнит задачу для вас

<div id="searchBar">
    <img src="img/logo.png" />                
    <input type="text" />
</div>

Ответ 4

Я бы, наверное, сделал что-то вроде

<div id='search-logo-bar'><input type='text'/></div>

с css

div#search-logo-bar {
    padding-left:10%;
    background:#333 url(logo.png) no-repeat left center;
    background-size:10%;
}
input[type='text'] {
    display:block;
    width:100%;
}

ДЕМО

http://jsfiddle.net/5MHnt/

Ответ 5

Это может быть достигнуто путем обертывания изображения и строки поиска в их собственном контейнере и плавания изображения влево с определенной шириной.

Это выводит изображение из "потока", что означает, что любые элементы, отображаемые в нормальном потоке, не будут корректировать их позиционирование, чтобы учесть это.

Чтобы сделать "in flow" searchBar, правильно расположенным справа от изображения, вы придаете ему левую надпись, равную ширине изображения плюс желоб.

Эффект заключается в том, чтобы сделать изображение фиксированной шириной, в то время как остальная часть блока контейнера заполняется жидкостью по строке поиска.

<div class="container">
  <img src="img/logo.png"/>
  <div id="searchBar">
    <input type="text" />
  </div>
</div>

и css

.container {
  width: 100%;
}

.container img {
  width: 50px;
  float: left;
}

.searchBar {
  padding-left: 60px;
}

Ответ 6

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

http://jsbin.com/hapelawake