Растянуть несколько div в div 100% css

106

01 июня 2021, 17:50

Подскажите пожалуйста, как растянуть дочерние div в родительском div который имеет width: 100%;. Таблица не подходит.

$(document).ready(function() { 
var width = $("#glob").width(); 
var width_child = width / 7-7; 
$(".child").width(width_child.toFixed(2)); 
});

.time { 
  width: 100%; 
  height: 20px; 
  background: #ccc; 
} 
.child { 
  height: 100%; 
  background: red; 
  border-right: 1px solid; 
  display: inline-block; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div id="glob" class="time"> 
  <div class="child"></div> 
  <div class="child"></div> 
  <div class="child"></div> 
  <div class="child"></div> 
  <div class="child"></div> 
  <div class="child"></div> 
  <div class="child"></div> 
</div>

Answer 1

Для родительского элемента с классом .time задайте свойство display: flex, а для дочерних элементов с классами child свойство flex-grow: 1;

Результат

.time { 
  display: flex; 
  width: 100%; 
  height: 20px; 
  background: #ccc; 
} 
 
.child { 
  flex-grow: 1; 
  height: 100%; 
  background: red; 
  border-right: 1px solid; 
  display: inline-block; 
}

<div id="glob" class="time"> 
  <div class="child"></div> 
  <div class="child"></div> 
  <div class="child"></div> 
  <div class="child"></div> 
  <div class="child"></div> 
  <div class="child"></div> 
  <div class="child"></div> 
</div>