Содержимое DIV в одну строку на всю ширину

373

26 мая 2017, 11:45

Добрый день.

Необходимо вот такую строку:

Блок "Каталог товаров" имеет фиксированный размер в строке, необходимо чтобы остальное пространство которое осталось в строке, заполнил блок поиска.

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

Пожалуйста, подскажите как решить проблему?

Ссылка на код: https://jsfiddle.net/en08ygfd/

HTML:

<div class="shapka">
    <div class="cat">
        <div>Каталог товаров</div>
    </div>
    <div class="search">
        <input id="oem" name="oem" placeholder="Поиск" type="text"><button type="submit">Найти</button>
    </div>
</div>

CSS:

.shapka {background: #e73c3c;padding: 10px 25px;}
.cat {display: inline-block;line-height: 40px;background: #fff;padding: 0 20px;margin-right: 50px;}
.cat div {color: #333;font-weight: 600;text-transform: uppercase;}
.search {display: inline-block;}
.search input {line-height: 36px;border: 1px solid #ccc;padding: 0 12px;}
.search button {line-height: 32px;margin-left: 10px;}

Answer 1

Вы можете воспользоваться типом отображения flex следующим образом:

.shapka { 
  background: #e73c3c; 
  padding: 10px 25px; 
  display: flex; 
} 
 
.cat { 
  display: inline-block; 
  line-height: 40px; 
  background: #fff; 
  padding: 0 20px; 
  margin-right: 50px; 
} 
 
.cat div { 
  color: #333; 
  font-weight: 600; 
  text-transform: uppercase; 
} 
 
.search { 
  display: flex; 
  flex-grow: 1; // дает приоритет на растяжение блока 
} 
 
.search input { 
  flex-grow: 1; // дает приоритет на растяжение блока 
  line-height: 36px; 
  border: 1px solid #ccc; 
  padding: 0 12px; 
} 
 
.search button { 
  line-height: 32px; 
  margin-left: 10px; 
}

<div class="shapka"> 
  <div class="cat"> 
    <div>Каталог товаров</div> 
  </div> 
  <div class="search"> 
    <input id="oem" name="oem" placeholder="Поиск" type="text"><button type="submit">Найти</button> 
  </div> 
</div>

Посмотрите поддерживаемые браузеры: http://caniuse.com/#search=flex.

Если это вам не подходит, можно воспользоваться табличной версткой.

Answer 2

Попробуйте использовать функцию calc.
Она будет считать 100% ширины - (ширина блока + ширина отступа).

Например:

.search input {
  line-height: 36px;
  border: 1px solid #ccc;
  padding: 0 12px;
  width:calc(100% - 240px);
}

Answer 3

Мое решение через Booststrap 3. Использовал Grid System:

Ссылка на jsfiddle

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Содержимое DIV в одну строку на всю ширину

Как создаются отчеты в Visual Studio на c#?

Заполнить datagrid wpf

System.DirectoryServices.Protocols.DirectoryOperationException: Сервер не может обработать запросы каталогов

Как создать классы в приложении ASP NET MVC [требует правки]