2

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

Вот код:

div{
  display:inline-block;
}
.global{
  background:blue;
}
.main{
  background:red;
  overflow:hidden;
  width:0%; /// Можно менять это значение, контейнер будет как бы все равно держать в уме эти блоки
  white-space:nowrap;
}
.square{
  width:50px;
  height:50px;
  background:green;
  border:1px solid black;
}
<div class="global">
  <div class="main">
    <div class="square"></div>
    <div class="square"></div>
  </div>
</div>
<div class="text">hello!</div>

Не знаю как задать правильно вопрос (пусть переименуют если нужно будет).

P.S Что-то мне подсказывает, что мою проблему решить нельзя

3
  • Под "длиной" имеется в виду ширина или высота?
    – labris
    Commented 21 апр. 2017 в 0:35
  • Если убрать оба <div class="square"></div>, то .global тоже исчезнет.
    – labris
    Commented 21 апр. 2017 в 0:39
  • @labris ширина, это и так понятно что глобал исчезнет ведь физически этих контейнеров ведь нет, а так они присутствуют хоть в том виде что дочерний контейнер говорит что я вас не показываю, но вы есть. Прям как в том анекдоте: "Ты видишь суслика? И я нет, а он есть."
    – MaximPro
    Commented 21 апр. 2017 в 1:19

1 ответ 1

2

Замени width:0%; на width:0px;

div{
  display:inline-block;
}
.global{
  background:blue;
}
.main{
  background:red;
  overflow:hidden;
  width:0px; /// Можно менять это значение, контейнер будет как бы все равно держать в уме эти блоки
  white-space:nowrap;
}
.square{
  width:50px;
  height:50px;
  background:green;
  border:1px solid black;
}
<div class="global">
  <div class="main">
    <div class="square"></div>
    <div class="square"></div>
  </div>
</div>
<div class="text">hello!</div>

введите сюда описание изображения введите сюда описание изображения

8
  • А в чем причина?
    – MaximPro
    Commented 21 апр. 2017 в 2:32
  • какая?.........
    – code211218
    Commented 21 апр. 2017 в 3:14
  • С % есть невидимый блок, а с px его нет
    – MaximPro
    Commented 21 апр. 2017 в 3:25
  • Длина глобального auto
    – code211218
    Commented 21 апр. 2017 в 3:55
  • w3.org/TR/CSS2/visudet.html - 10.2 width Value: Initial: auto
    – code211218
    Commented 21 апр. 2017 в 4:04

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.