Автоматическое изменение размера дочернего div для заполнения свободного пространства родительского div

#html #css

#HTML #css

Вопрос:

У меня есть два дочерних подразделения внутри родительского подразделения. Первый дочерний div составляет 32% от ширины, а второй дочерний div составляет 68% от ширины. Если для первого дочернего div установлено значение display: none; , как мне сделать так, чтобы второй дочерний div увеличивался с 68% ширины до 100% ширины? Спасибо

 .parent {
    width: 400px;
    height: 200px;
    position: relative;
    float: left;
    display: inline-block;
}

.child1 {
    width: 32%;
    height: 100%;
    float: left;
    background-color: green;
}

.child2 {
    width: 68%;
    height: 100%;
    float: left;
    background-color: red;
}

 <div class='parent'>
  <div class='child1'></div>
  <div class='child2'></div>
</div>

Развернуть фрагмент

Ответ №1:

Я бы использовал магию flex!

flex: 0 0 32%; On child1 устанавливает ширину равной 32%.

flex: 1; для дочерняго2 означает: Заполнить все доступное пространство. Таким образом, если дочерний элемент1 исчезнет, дочерний элемент 2 заполнит все оставшееся пространство.

 .parent {
  width: 400px;
  height: 200px;
  display: flex;
}

.child1 {
  flex: 0 0 32%;
  background-color: green;
}

.child2 {
  flex: 1;
  background-color: red;
}

 <div class='parent'>
  <div class='child1'></div>
  <div class='child2'></div>
</div>

Развернуть фрагмент

Ответ №2:

Если вы используете flex вместо float, установка display: none одного из них адаптирует другое для вас:

 document.querySelector('button').addEventListener('click', () => {
  document.querySelector('.child1').classList.toggle('hidden');
})

 .parent {
    width: 400px;
    height: 200px;
    position: relative;
    display: flex;
}

.child1 {
    flex: 0 0 32%;
    background-color: green;
}

.child2 {
    flex: 1 1 auto;
    background-color: red;
}

.hidden {
  display: none;
}

button {
  margin-bottom: 1em;
}

 <button>Toggle child1 visibility</button>

<div class='parent'>
  <div class='child1'></div>
  <div class='child2'></div>
</div>

Развернуть фрагмент

Ответ №3:

Здесь вместо использования свойства float вы можете использовать Flexbox. для получения более подробной информации перейдите по этой ссылке.

итак, в flexbox вы можете достичь этого, следуя приведенному ниже коду :-

 .parent {
    width: 400px;
    height: 200px;
    display: flex;
}

.child1 {
    height: 100%;
    background-color: green;
    flex:1;
}

.child2 {
   // display:none;
    height: 100%;
    flex:2;
    background-color: red;
}

 <div class='parent'>
  <div class='child1'></div>
  <div class='child2'></div>
</div>

Развернуть фрагмент

Ответ №4:

вот как вы можете добиться этого, используя свой подход.

   <div class="parent">
  <div class="child1"></div>
  <div class="child2"></div>
</div>

.parent {
    width: 400px;
    height: 200px;
    font-size: 20px;
    font-weight: bold;
    color: white;
  }

  .child1 {
    width: 32%;
    height: 100%;
    float: left;
    background-color: green;
  }

  .child2 {
    width: 100%;
    height: 100%;
    background-color: blue;
  }