Как в данном случае сделать резиновый блок?

Question

[Muranx]

Здравствуйте!

ссылка

Есть вот такая вот заготовка! Нужно не ломая данное центрирование ( с display: inline-block; и vertical-align: middle;) без использования display: flex; ну и желательно без использования position: absolute; ( на боковых блоках ) сделать так, чтобы центральный ( красный блок ) адаптивно сжимался до минимальных размеров, при уменьшении размеров окна браузера оставаясь офк постоянно в центре между оранжевыми, и чтоб никакие блоки ( боковые ) не перескакивали на новые строчки, ну и разумеется сам красный блок вёл себя адекватно сжимаясь! Я пробовал играться с max-width, min-width, но судя по всему я не очень себе понимаю как они работают, потому-как не получилось, ну а мб это вообще не реально в данном случае

Answer 1

[RAX7]

Так?

.wrapper {
  font-size: 0;
  white-space: nowrap;
  overflow: hidden;
}

.test2 {
  width: calc(100% - 2 * 100px - 2 * 5px); /* 100% - left - right - marginLeft - marginRight */
  margin: 0 5px;
  overflow: hidden;
  text-overflow: ellipsis;
}

Comments

[Muranx]

RAX7, спасибо за ответ ! Но получается, что ваш способ не поможет, если ширина левого и правого блока не известны?

[RAX7]

Muranx, да, всё верно. Возможно способ от Александр будет лучше в таком случае.

Answer 2

[Юрий]

Основная идея в том, чтобы считать ширину вашего блока через calc. Правда, из-за display: inline-block придётся ставить font-size: 0 для родителя и сбрасывать его во внутренних блоках, иначе между блоками будет дефолтный пробел.



Но вообще это конечно дичь, флекс для таких вещей и создан.

Comments

[Muranx]

Юрий, спасибо за ответ! Получается если мы не знаем ширину боковых блоков , то ваш способо не поможет?

[Юрий]

Muranx, нет. Тогда только флекс.

[Muranx]

Юрий, Ок, всё равно спасибо!

Answer 3

[Александр]

Можно еще так (но уже не модно):

*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Arial;
}

.wrapper{
  display: table;
  width: 100%;
  background: #f7f7f7;
}

.wrapper::before{
  content: '';
  height: 100%;
  vertical-align: middle;
}

.test1, .test2, .test3{
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  line-height: 50px;
  color: #fff;
  padding: 0px 10px 0px 10px;
  border-radius: 10px;
}

.test1, .test3{
  width: 100px;
  height: 50px;
  background: orange;
}

.test2{
  background: red;
  height: 40px;
  line-height: 40px;
}