Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
 
Рейтинг 4.64/11: Рейтинг темы: голосов - 11, средняя оценка - 4.64
61 / 54 / 9
Регистрация: 12.02.2019
Сообщений: 286
1

Как сделать блоки внутри блока?

30.12.2019, 20:33. Просмотров 2072. Ответов 20
Метки нет (Все метки)

Как сделать блоки внутри блока?
Как сделать такую вот штуку? Есть идея сделать 8 внутренних блоков, но думаю есть варианты попроще, подскажите
0
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
30.12.2019, 20:33
Ответы с готовыми решениями:

а как тут расположить блоки 4 блока внутри одного
:cry:

Внутри родительского блока сделать отступ дочернего блока сверху автоматически
Здравствуйте, как с помощью css внутри родительского блока сделать отступ дочернего блока сверху...

Как сделать два косых блока (один внутри второго)?
Добрый вечер. Не выходит сделать подобное. Пытался так: https://codepen.io/vlad-spesiwec/pen/oKeZvY...

Как сделать отступы внутри блока с обеих сторон для текста?
Как сделать отступы внутри блока div с обеих сторон для текста?

20
532 / 435 / 176
Регистрация: 14.10.2017
Сообщений: 1,205
30.12.2019, 20:53 2
flex
0
61 / 54 / 9
Регистрация: 12.02.2019
Сообщений: 286
30.12.2019, 21:37  [ТС] 3
klopp, Забыл указать что без гридов надо сделать))
0
466 / 331 / 143
Регистрация: 16.02.2018
Сообщений: 930
30.12.2019, 22:44 4
Anvean, так вам и скинули на flex а не на грид(ы)
Сделайте на float
HTML5
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
27
28
29
30
31
32
33
34
35
<div class="box">
  <div class="item">
    <div class="content">
      <img src="https://www.placehold.it/24" alt="">
      <h4>Hello</h4>
      <p>some text about some fish</p>
    </div>
  </div>
  <div class="item"><img src="https://www.placehold.it/240" alt=""></div>
  <div class="item">
    <div class="content">
      <img src="https://www.placehold.it/24" alt="">
      <h4>Hello</h4>
      <p>some text about some fish</p>
    </div>
  </div>
  <div class="item"><img src="https://www.placehold.it/240" alt=""></div>
  <div class="item"><img src="https://www.placehold.it/240" alt=""></div>
  <div class="item">
    <div class="content">
      <img src="https://www.placehold.it/24" alt="">
      <h4>Hello</h4>
      <p>some text about some fish</p>
    </div>
  </div>
  <div class="item"><img src="https://www.placehold.it/240" alt=""></div>
  <div class="item">
    <div class="content">
      <img src="https://www.placehold.it/24" alt="">
      <h4>Hello</h4>
      <p>some text about some fish</p>
    </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
27
28
29
30
31
32
33
34
35
36
37
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
 
body {
  background: #000;
}
 
.box {
  font: 16px/24px Arial, sans-serif;
  margin: 10px auto;
  max-width: 960px;
  padding: 0 20px;
}
.box:after {
  conttent: ' ';
  display: block;
  clear: both;
}
.box .item {
  width: 25%;
  float: left;
  height: 200px;
  background-color: #fff;
}
.box .item > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.box .item .content {
  text-align: center;
  padding: 49px 20px;
}
1
61 / 54 / 9
Регистрация: 12.02.2019
Сообщений: 286
02.01.2020, 11:45  [ТС] 5
novichek_1905, box прилипает к верху Хэдэра, как это исправить? ксс код прилагается.
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
.body{
    font-size: 16px;
}
.row:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
.row{
    display: inline-block;
}
* html.row{
    height: 15%;
}
.row{
    display: block;
}
.header{
}
.in-header{
    height: 400px;
    background-color: #DE2B24;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.box {
    margin-top: auto;
  font: 16px/24px Arial, sans-serif;
  margin: auto;
  max-width: 860px;
  padding: 0 20px;
}
.box:after {
  content: ' ';
  display: block;
  clear: both;
}
.box .item {
  width: 25%;
  float: left;
  height: 150px;
  background-color: #fff;
}
.box .item > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.box .item .Head-content {
  text-align: center;
  padding: 49px 20px;
}
.content{
    width: 100%;
    float: left;
    background-color:#1286BF;
}
.in-content{
    height: 400px;
}
.footer{
    
}
.in-footer{
    background-color: #2A2A2A;
    height: 200px;
}
0
466 / 331 / 143
Регистрация: 16.02.2018
Сообщений: 930
02.01.2020, 19:48 6
Цитата Сообщение от Anvean Посмотреть сообщение
Хэдэра, как это исправить?
CSS
1
.header{margin-bottom: 100px;}
1
61 / 54 / 9
Регистрация: 12.02.2019
Сообщений: 286
06.01.2020, 23:19  [ТС] 7
novichek_1905, Если вам не сложно, подскажите как должен выглядеть этот же макет только уже с css Grid, насколько я понимаю нужно добавить в хэдэр свойство грид, и в нем сделать 2 строки по 4 колонки, вопрос как это все разместить по центру и как управлять отдельно каждой ячейкой?
0
466 / 331 / 143
Регистрация: 16.02.2018
Сообщений: 930
06.01.2020, 23:46 8
Anvean, я не оч понял, вам нужно переделать мой код, который я присылал ранее под грид, или какой макет?
0
61 / 54 / 9
Регистрация: 12.02.2019
Сообщений: 286
06.01.2020, 23:48  [ТС] 9
novichek_1905, да, код остаётся тот же, если у вас нет времени код не обязательно, главное на правильную мысль натолкните:)
0
466 / 331 / 143
Регистрация: 16.02.2018
Сообщений: 930
07.01.2020, 00:16 10
Лучший ответ Сообщение было отмечено Anvean как решение

Решение

Anvean, сделайте вот так типа:
HTML5
1
2
3
4
5
6
7
8
9
10
<div class="box">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
 
.box {
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  grid-template: repeat(2, 1fr)/repeat(4, 1fr);
}
.box .item {
  height: 200px;
  background-color: darkred;
}
.box .item:nth-child(-n + 4):nth-child(odd), .box .item:nth-child(n + 5):nth-child(-n + 8):nth-child(even) {
  background: gray;
}
стили для "шахматки" это просто пример для лучшего визуального восприятия.
1
61 / 54 / 9
Регистрация: 12.02.2019
Сообщений: 286
07.01.2020, 15:11  [ТС] 11
novichek_1905, Cпасибо большое, осталось немного непонятно как завернуть этот бокс в два класса, допустим в wrapper и header, покрутил попробовал, но не работает
0
466 / 331 / 143
Регистрация: 16.02.2018
Сообщений: 930
07.01.2020, 15:46 12
Цитата Сообщение от Anvean Посмотреть сообщение
как завернуть этот бокс в два класса, допустим в wrapper и header
боюсь не понимаю о чем идёт речь...
0
61 / 54 / 9
Регистрация: 12.02.2019
Сообщений: 286
07.01.2020, 15:51  [ТС] 13
novichek_1905, div с классом box поместить еще в два diva с классами wrapper и header
0
466 / 331 / 143
Регистрация: 16.02.2018
Сообщений: 930
07.01.2020, 16:09 14
Anvean, а зачем так? Почему они должны находиться в такой вложенности?
0
61 / 54 / 9
Регистрация: 12.02.2019
Сообщений: 286
07.01.2020, 16:13  [ТС] 15
novichek_1905, Нуу, разбить страницу на аспекты, типо хэдэра контента футера, и работать с ними по отдельности, или Grid позволяет как-то уйти от этого?
Вот так выглядит вся страница, для понятности
Как сделать блоки внутри блока?
0
466 / 331 / 143
Регистрация: 16.02.2018
Сообщений: 930
07.01.2020, 16:21 16
Цитата Сообщение от Anvean Посмотреть сообщение
на аспекты, типо хэдэра контента футера
там нет header
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<section class="section">
  <div class="container">
    <div class="section-title text-center">
      <h1>Some title</h1>
      <div class="text">Some text</div>
    </div>
    <div class="box">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
  </div>
 
</section>
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
27
28
29
30
31
32
33
34
35
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
 
.section-title {
  font-family: Arial;
  text-align: center;
  margin-bottom: 40px;
  color: #fff;
}
 
.section {
  background-color: darkgreen;
  padding: 50px 0;
}
 
.container {
  max-width: 960px;
  margin: 0 auto;
}
 
.box {
  display: grid;
  grid-template: repeat(2, 1fr)/repeat(4, 1fr);
}
.box .item {
  height: 200px;
  background-color: darkred;
}
.box .item:nth-child(-n + 4):nth-child(odd),
.box .item:nth-child(n + 5):nth-child(-n + 8):nth-child(even) {
  background: gray;
}
1
61 / 54 / 9
Регистрация: 12.02.2019
Сообщений: 286
07.01.2020, 16:49  [ТС] 17
novichek_1905, Спасибо, подскажите еще - можно ли каким-то свойством Grid ограничить максимальный размер ячейки?

Добавлено через 6 минут
novichek_1905, Уже разобрался, еще раз спасибо:)
0
61 / 54 / 9
Регистрация: 12.02.2019
Сообщений: 286
07.01.2020, 20:58  [ТС] 18
novichek_1905, Если позволите)..
Еще вопросик как выравнивать этот grid вот это
Как сделать блоки внутри блока?

Должно быть вот так..
Как сделать блоки внутри блока?

Код прилагается, как не крутил не хочет выравниваться и все, а если и выравнивает то сильно обрезает длинну..
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 <section class="Ssection">
            <div class="Cconteiner">
                 <div class="section-title text-center">
                  <h1>Some title</h1>
                  <div class="text">Some text</div>
                </div>
                <div>
                    <div class="round"><p></p> </div> 
                    <div class="geom"> </div>
                </div>
                <div class="formcontainer">
                     <p class="text1">Sit down with pur experts to receive a free customixes marketing plan for your business + Learn How To Use Google and Facebook to get 5000% ROI or more</p>
                    <form>
                        
                       <input class="iteminp" type="text" name="username" placeholder="Your Name">
                            <input class="iteminp" type="number" name="number" placeholder="Contact Number">
                            <input class="iteminp" type="text" name="company" placeholder="Company Name">
                        
                        <br>
                            <input class="itemsubmit" type="submin" name="submit" value="SUBMIT NOW">
</form>
                </div>
            </div>
        </section>
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
.Ssection{
    
    background-color:#1286BF;
    height: 850px;
    padding: 50px 0;
}
.round {
    color: white;
  width: 2.5em;
  height: 2.5em;
  border: 2px solid white;
  border-radius: 50%;
  line-height: 2.5em; 
  text-align: center;  
  background: #1286BF;
   margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
}
.round :hover{
   -webkit-transform: rotateZ(20deg);
    -ms-transform: rotateZ(20deg);
    transform: rotateZ(20deg);
    
}
.geom{
    width: 30px;
    margin: auto;
    border: 30px solid transparent; border-bottom: 30px solid white;
}
.formcontainer{
   
    margin: auto auto auto auto;
    background-color: white;
    height: 450px;
    width: 680px;
   padding-right: 50px;
   padding-left: 50px;
    border-radius: 2%;
}
form{
   
    display: grid;
     align-items: center;
    align-self: center;
    grid-template-columns: 480px;
    grid-gap: 16px;
}
form .iteminp{
     height: 50px;
    font-size: 18px;
    margin-top: 10px;
    border-radius: 4px;
    padding-left: 10px;
    background-color: #f1f1f1;
}
form .itemsubmit
{
    text-align: center;
    font-weight: 600;
    width: auto;
    height: 50px;
    background-color: red;
    color: white;
    padding: 13px,20px;
    border-radius: 4px;
    margin: auto;
}
.itemsubmit:hover{
    transform: scale(1.07);
    color: lightcyan;
}
 
.text1{
    font-size: 16px;
    text-align: center;
    padding-top: 55px;
    padding-bottom: 30px;
    color: lightgray;
}
0
466 / 331 / 143
Регистрация: 16.02.2018
Сообщений: 930
07.01.2020, 21:06 19
Anvean, хотелось бы помочь, но не пойму проблемы)
0
61 / 54 / 9
Регистрация: 12.02.2019
Сообщений: 286
07.01.2020, 21:07  [ТС] 20
novichek_1905, Форма внутри белой области не выравнивается по центру))
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
07.01.2020, 21:07

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

Как сделать, чтоб блок был внутри блока мобильной версии сайта?
У меня стоит плагин для ВордПресс WP-PageNavi. Хочу настроить для него стили вручную. Так...

Сделать статичными блоки при увеличении размера блока
Есть несколько блоков div, идущие подряд сверху вниз. Каждый содержит некоторый текст. При событии...

Блоки relative и position внутри блока с position: relative
Всем привет! Я новичок, верстаю свой первый сайт (http://cosmetolog.cu.cc/). У меня возник...

Как внутри div выровнить другие блоки по вертикали
Добрый день, подскажите как внутри див (бутстраповская колонка) выровнить блоки (картинки...


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

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

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