Muranx
@Muranx
кто понял this тот в цирке не смеётся

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

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

ссылка

Есть вот такая вот заготовка! Нужно не ломая данное центрирование ( с display: inline-block; и vertical-align: middle;) без использования display: flex; ну и желательно без использования position: absolute; ( на боковых блоках ) сделать так, чтобы центральный ( красный блок ) адаптивно сжимался до минимальных размеров, при уменьшении размеров окна браузера оставаясь офк постоянно в центре между оранжевыми, и чтоб никакие блоки ( боковые ) не перескакивали на новые строчки, ну и разумеется сам красный блок вёл себя адекватно сжимаясь! Я пробовал играться с max-width, min-width, но судя по всему я не очень себе понимаю как они работают, потому-как не получилось, ну а мб это вообще не реально в данном случае
  • Вопрос задан
  • 88 просмотров
Решения вопроса 3
RAX7
@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;
}
Ответ написан
@cheeroque
Основная идея в том, чтобы считать ширину вашего блока через calc. Правда, из-за display: inline-block придётся ставить font-size: 0 для родителя и сбрасывать его во внутренних блоках, иначе между блоками будет дефолтный пробел.



Но вообще это конечно дичь, флекс для таких вещей и создан.
Ответ написан
z80b
@z80b
Frontend
Можно еще так (но уже не модно):
*{
  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;
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы