Как заполнить дочерними div-ами всю ширину родительского?

@Bakuryu · Регистрация: 25.07.2014

Студворк — интернет-сервис помощи студентам

Есть див в котором в рядок находятся 2 дива, ширина их родителя допустим 900п, как сделать на CSS так, чтобы 2 дочерних автоматически приняли ширину половины родительского (450п)? И если я увеличу количество див-ов до 3х, как сделать так, чтобы дочерние див-ы автоматически стали по 300п?(CSS стили для двух, трёх и т.д. блоков должны быть те же).

@vovandr · 04.08.2014, 22:16

HTML5
1
2
3
4
5
<div class="container">
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore ratione minus veritatis quae, rem magni saepe. Corrupti, laudantium saepe tenetur.</div>
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore ratione minus veritatis quae, rem magni saepe. Corrupti, laudantium saepe tenetur.</div>
   <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore ratione minus veritatis quae, rem magni saepe. Corrupti, laudantium saepe tenetur.</div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
.container{
  display: table;
  width: 1000px;
  margin: 0 auto;
}
.col{
  padding: 30px;
  background: skyblue;
  display: table-cell;
}

Добавлено через 18 секунд
Демо http://codepen.io/anon/pen/Blkxo

@Bakuryu · 04.08.2014, 23:25 **[ТС]**

Сообщение от vovandr

Демо http://codepen.io/anon/pen/Blkxo

Спасибо, почти то, что надо, только ещё одно один момент нужен - ширина каждого дочернего блока должна быть одинакова.

@vovandr · 05.08.2014, 09:11

HTML5
1
2
3
4
5
6
7
8
9
<div class="wrap">
  <div class="container">
    <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore ratione minus veritatis quae, rem magni saepe. Corrupti, laudantium saepe tenetur.</div>
    <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore ratione minus veritatis quae, rem magni saepe. Corrupti, laudantium saepe tenetur.</div>
     <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore ratione minus veritatis quae, rem magni saepe. Corrupti, laudantium saepe tenetur.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur rerum iusto dolor culpa, facilis labore eligendi dolorum soluta ipsum tempore officia provident quod, deserunt ullam reiciendis quos vero magnam ducimus accusamus nostrum maxime quasi. Mollitia qui dolorum dicta necessitatibus ipsam.
    </div>
  </div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.wrap{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: column wrap;
  -ms-flex-flow: column wrap;
  flex-flow: column wrap;
    width: 1000px;
  margin: 0 auto;
}
.container{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
 
}
.col{
  padding: 30px;
  background: skyblue;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

@Bakuryu · 05.08.2014, 18:33 **[ТС]**

Спасибо, работает вроде. Только я так понял старыми браузерами display: flex не поддерживается. Вообще получилось сделать как предыдущий вариант, с использованием display: table, только ещё в стиле дочерних элементов указал max-width: 0px;

Новые блоги и статьи Все статьи Все блоги /
Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .
Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .	Фото: Daniel Greenwood kumehtar 13.11.2025	Расскажи мне о Мире, бродяга kumehtar 12.11.2025 — Расскажи мне о Мире, бродяга, Ты же видел моря и метели. Как сменялись короны и стяги, Как эпохи стрелою летели. - Этот мир — это крылья и горы, Снег и пламя, любовь и тревоги, И бескрайние. . .

@Bakuryu 0 / 0 / 0 Регистрация: 25.07.2014 Сообщений: 7

	Как заполнить дочерними div-ами всю ширину родительского? 04.08.2014, 22:05. Показов 19495. Ответов 4 Метки нет (Все метки) Есть див в котором в рядок находятся 2 дива, ширина их родителя допустим 900п, как сделать на CSS так, чтобы 2 дочерних автоматически приняли ширину половины родительского (450п)? И если я увеличу количество див-ов до 3х, как сделать так, чтобы дочерние див-ы автоматически стали по 300п?(CSS стили для двух, трёх и т.д. блоков должны быть те же). 0

@Bakuryu 0 / 0 / 0 Регистрация: 25.07.2014 Сообщений: 7
	05.08.2014, 18:33 [ТС]
	Спасибо, работает вроде. Только я так понял старыми браузерами display: flex не поддерживается. Вообще получилось сделать как предыдущий вариант, с использованием display: table, только ещё в стиле дочерних элементов указал max-width: 0px; 0

Как заполнить дочерними div-ами всю ширину родительского?

Решение