Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг: Рейтинг темы: голосов - 45, средняя оценка - 4.64
Bakuryu
0 / 0 / 1
Регистрация: 25.07.2014
Сообщений: 7
#1

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

04.08.2014, 22:05. Просмотров 8834. Ответов 4
Метки нет (Все метки)

Есть див в котором в рядок находятся 2 дива, ширина их родителя допустим 900п, как сделать на CSS так, чтобы 2 дочерних автоматически приняли ширину половины родительского (450п)? И если я увеличу количество див-ов до 3х, как сделать так, чтобы дочерние див-ы автоматически стали по 300п?(CSS стили для двух, трёх и т.д. блоков должны быть те же).
0
Лучшие ответы (1)
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
04.08.2014, 22:05
Я подобрал для вас темы с готовыми решениями и ответами на вопрос Как заполнить дочерними div-ами всю ширину родительского? (HTML, CSS):

Растянуть элемент Div на всю высоту родительского div
Как сделать что бы элемент Div растягивался на всю высоту следующего элемента?...

Как растянуть div на всю ширину сайта?
Можете ли вы мне подсказать как растянуть div на всю ширину сайта, width: 100%...

Как растянуть текст на всю ширину div?
Есть такой код: <div style="background-color: #00FF00; width: 100%; max-width:...

Растянуть <LI> на всю ширину родительского элемента
В общем, есть меню. Родительский элемент - &lt;ul&gt; В нём несколько элементов...

Как сделать div внутри diva во всю ширину страницы
Здравствуйте &lt;div style=&quot;width:900px; margin:0, auto; height:100px;&quot;&gt; ...

Div на всю ширину экрана
простейшая казалось бы задачка. однако если указывать width 100% он не...

4
vovandr
629 / 517 / 194
Регистрация: 19.08.2013
Сообщений: 1,400
04.08.2014, 22:16 #2
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
0
Bakuryu
0 / 0 / 1
Регистрация: 25.07.2014
Сообщений: 7
04.08.2014, 23:25  [ТС] #3
Цитата Сообщение от vovandr Посмотреть сообщение
Спасибо, почти то, что надо, только ещё одно один момент нужен - ширина каждого дочернего блока должна быть одинакова.
0
vovandr
629 / 517 / 194
Регистрация: 19.08.2013
Сообщений: 1,400
05.08.2014, 09:11 #4
Лучший ответ Сообщение было отмечено Bakuryu как решение

Решение

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;
}
1
Bakuryu
0 / 0 / 1
Регистрация: 25.07.2014
Сообщений: 7
05.08.2014, 18:33  [ТС] #5
Спасибо, работает вроде. Только я так понял старыми браузерами display: flex не поддерживается. Вообще получилось сделать как предыдущий вариант, с использованием display: table, только ещё в стиле дочерних элементов указал max-width: 0px;
0
05.08.2014, 18:33
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
05.08.2014, 18:33
Привет! Вот еще темы с решениями:

Ширина div во всю ширину родителя
Всем привет! Есть верстка: &lt;!doctype html&gt; &lt;html lang=&quot;ru&quot;&gt; &lt;head&gt; ...

Div не заполняется на всю ширину браузера
Здравствуйте. Скажите пожалуйста. Почему у меня не заполняется div на всю...

Содержимое DIV в одну строку на всю ширину
Добрый день. Необходимо сделать строку (скрин во вложении). Кнопка...

Фон div'a на всю ширину, но не высоту экрана + подвал
Здравствуйте! Я совсем еще начинающий, так что если вопрос очень уж глупый -...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru