Форум программистов, компьютерный форум, киберфорум
Наши страницы

HTML, CSS

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

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

04.08.2014, 22:05. Просмотров 7950. Ответов 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 - HTML, CSS
Как сделать что бы элемент Div растягивался на всю высоту следующего элемента? Я только начинающий верстальщик и возникла такая...

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

Как растянуть текст на всю ширину div? - HTML, CSS
Есть такой код: <div style="background-color: #00FF00; width: 100%; max-width: 800px; text-align: center;"> <p>text</p> </div> ...

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

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

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

4
vovandr
628 / 516 / 139
Регистрация: 19.08.2013
Сообщений: 1,401
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 / 0
Регистрация: 25.07.2014
Сообщений: 7
04.08.2014, 23:25  [ТС] #3
Цитата Сообщение от vovandr Посмотреть сообщение
Спасибо, почти то, что надо, только ещё одно один момент нужен - ширина каждого дочернего блока должна быть одинакова.
0
vovandr
628 / 516 / 139
Регистрация: 19.08.2013
Сообщений: 1,401
05.08.2014, 09:11 #4
Лучший ответ Сообщение было отмечено автором темы, экспертом или модератором как ответ
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 / 0
Регистрация: 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 не заполняется на всю ширину браузера - HTML, CSS
Здравствуйте. Скажите пожалуйста. Почему у меня не заполняется div на всю ширину браузера ? Вот код: &lt;style type=&quot;text/css&quot;&gt; ...

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

Содержимое DIV в одну строку на всю ширину - HTML, CSS
Добрый день. Необходимо сделать строку (скрин во вложении). Кнопка &quot;Каталог товаров&quot; имеет фиксированный размер в строке,...

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


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

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

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