Расположение элементов

@Vlad333 · Регистрация: 02.04.2017

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

Что то не получается от левого края должен идти горизонтально текст 20% потом картинка 60% потом текст 20% после этого блока на строку ниже должны идти 3 блока разноцветных. Блин че ж так трудно идет....................

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
<div class="container">
        <div class="content-top">
            <p class="left">
                Что такое Lorem Ipsum?
Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
            </p>
            
            <img src="assets/img/pramougolnaya.png" alt="kartinka pramougolnaya">
 
            <p class="right">
                Почему он используется?
Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться. Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а также реальное распределение букв и пробелов в абзацах, которое не получается при простой дубликации "Здесь ваш текст.. Здесь ваш текст.. Здесь ваш текст.." Многие программы электронной вёрстки и редакторы HTML используют Lorem Ipsum в качестве текста по умолчанию, так что поиск по ключевым словам "lorem ipsum" сразу показывает, как много веб-страниц всё ещё дожидаются своего настоящего рождения. За прошедшие годы текст Lorem Ipsum получил много версий. Некоторые версии появились по ошибке, некоторые - намеренно (например, юмористические варианты).
            </p>
 
            
        </div>
            <div class="content-center">
            
            </div>
    
                <div class="left-bar">
        
                </div>
                    <div class="right-bar">
        
                    </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
.container {
 display: grid; 
 grid-template-columns: repeat(20% 60% 20%);
 grid-template-rows: 50px 350px 50px;/* это я не понял что такое*/
}
 
.content-top {
    grid-column: span 3;
}
 
..content-top img {
    width: 60%;
    height: 400px;
}
 
.content-top  .left p .right p {
    width: 20%;
}
 
.content-center {
    grid-column: span 60%;
    border-radius: 15px;
    border:solid 7px #32CD32;
}
 
.left-bar {
     grid-column: span 20%;
     border-radius: 15px;
    border:solid 7px #008B8B;
}
 
.right-bar {
     grid-column: span 20%;
     border-radius: 15px;
    border:solid 7px #800080;
}

Комментарий модератора

1. На каждый вопрос создавайте по одной теме! (Правила п.4.4)
2. CSS-код оформляется с помощью тега [CSS]!

@Kerry_Jr · 18.06.2020, 14:10

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

CSS
1
grid-template-columns: repeat(20% 60% 20%);

repeat используется для повторения значения указанное количество раз. Лучше написать

CSS
1
grid-template-columns: 1fr 3fr 1fr;

@Vlad333 · 19.06.2020, 08:01 **[ТС]**

Блин не работает так как надо сначало должно идти текст картинка текст а потом снизу разноцветные блоки

@Soldado · 19.06.2020, 11:50

Я так понимаю, что технология Grid CSS так толком и не реализована. Браузеры не поддерживают многие элементы спецификации
Вот пример: grid-template-areas: - не работает

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
 
<title>Grid - Грід</title>
<style>
body {
    display: grid;
    grid-template-areas:“header header header” “nav article ads” “footer footer footer”;
    grid-template-rows: 60px 1fr 60px;
    grid-template-columns: 20% 1fr 15%;
    grid-gap: 10px;
    height: 100vh;
    margin: 0;
    }
header, footer, article, nav, div {
    padding: 20px;
    background: gold;
    }
    #pageHeader 
    {
        grid-area: header;
    }
    #pageFooter
    {
        grid-area: footer;
        }
    #mainArticle {
        grid-area: article;
        }
    #mainNav {
        grid-area: nav;
        }
    #siteAds {
        grid-area: ads;
        }
        </style>
</head>     
<body>
<header id=”pageHeader”>Header</header>
        <article id=”mainArticle”>Article</article>
           <nav id=”mainNav”>Nav</nav>
           <div id=”siteAds”>Ads</div>
          <footer id=”pageFooter”>Footer</footer>
 
</body>
 
</html>

@Soldado · 19.06.2020, 12:36

Может я не прав и просто есть другие ошибки.

@Vlad333 · 19.06.2020, 12:46 **[ТС]**

Soldado, Я незнаю я по интернетке где че подсмотрю и пробую, а кое что с уроков списываю, я даже еще незнаю как его понять этот грид и флекс ну в общем понимаю а написать еще не могу

@Soldado · 19.06.2020, 13:29

Vlad333, я тоже с 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
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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
 
<title>Grid - Грід</title>
<style>
.container {
 display: grid; 
 grid-template-areas:"top top top" "left center right" "footer footer footer";
 grid-template-columns:20% 1fr 20%;
 grid-template-rows: 50px 350px 50px;
}
 
.content-top {
      grid-area: top;
      border-radius: 15px;
    border:solid 7px #f8fd2f; 
}
 
 
.content-center {
  grid-area: center;
    border-radius: 15px;
    border:solid 7px #32CD32;
}
 
.left-bar {
     grid-area: left;
     border-radius: 15px;
    border:solid 7px #008B8B;
}
 
.right-bar {
    grid-area: right;
     border-radius: 15px;
    border:solid 7px #800080;
}
.footer {
    grid-area: footer;
     border-radius: 15px;
    border:solid 7px #800080;
}
 
 
        </style>
</head>     
<body>
<div class="container">
        <div class="content-top">
            content-top
            </div>
            <div class="content-center">
     <p class="left">
                Что такое Lorem Ipsum?
Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
            </p>
            
            <img src="assets/img/pramougolnaya.png" alt="kartinka pramougolnaya">
 
            <p class="right">
                Почему он используется?
Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться. Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а также реальное распределение букв и пробелов в абзацах, которое не получается при простой дубликации "Здесь ваш текст.. Здесь ваш текст.. Здесь ваш текст.." Многие программы электронной вёрстки и редакторы HTML используют Lorem Ipsum в качестве текста по умолчанию, так что поиск по ключевым словам "lorem ipsum" сразу показывает, как много веб-страниц всё ещё дожидаются своего настоящего рождения. За прошедшие годы текст Lorem Ipsum получил много версий. Некоторые версии появились по ошибке, некоторые - намеренно (например, юмористические варианты).
            </p>
        
            </div>
    
                <div class="left-bar">
        left-bar
                </div>
                    <div class="right-bar">
        right-bar
                    </div>
                  <div class="footer">footer</div>                   
                    
    </div>
</body>
 
</html>

@Kerry_Jr · 19.06.2020, 14:02

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

grid-template-areas: - не работает

С чего вы взяли, что не работает?

@Soldado · 19.06.2020, 14:10

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

С чего вы взяли, что не работает?

Ошибся. Всё работает.

@Vlad333 · 19.06.2020, 14:11 **[ТС]**

Soldado, не работает так как надо этот код

@Soldado · 19.06.2020, 14:17

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

Soldado, не работает так как надо этот код

А как надо?

@Soldado · 19.06.2020, 14:23

Вот крупнее

@Vlad333 · 19.06.2020, 14:44 **[ТС]**

Soldado, вот картинка

@Vlad333 · 19.06.2020, 14:49 **[ТС]**

Soldado, и еще хотел узнать для img картинки можно задать класс? в интернетке что то не говорят про это

@Soldado · 19.06.2020, 15:59

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

для img картинки можно задать класс? в интернетке что то не говорят про это

Можна.
Макет нужно делить на 5 колонок и объединять соответствующие

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
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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
 
<title>Grid - Грід</title>
<style>
.container {
 display: grid; 
 grid-template-areas:"top-left top-left top-center top-right top-right" "left center center center right" "footer footer footer footer footer";
 grid-template-columns:20% 50px 1fr 50px 20%;
 grid-template-rows: 150px 350px 100px;
}
 
.content-top-left {
      grid-area: top-left;
      border-radius: 5px;
    border:solid 3px #e3801c;
    text-align: justify; 
    padding: 10px;
}
.content-top-center {
      grid-area: top-center;
      border-radius: 5px;
    border:solid 3px #e21de2;
    text-align:center; 
    padding: 0;
} 
.content-top-right {
      grid-area: top-right;
      border-radius: 5px;
    border:solid 3px #0e02a4;
     text-align: justify;
     padding: 10px; 
}
 
 
 
 
.content-center {
  grid-area: center;
    border-radius: 5px;
    border:solid 3px #32CD32;
    padding: 10px;
}
 
.left-bar {
     grid-area: left;
     border-radius: 5px;
    border:solid 3px #008B8B;
    padding: 10px;
}
 
.right-bar {
    grid-area: right;
     border-radius: 5px;
    border:solid 3px #800080;
    padding: 10px;
}
.footer {
    grid-area: footer;
     border-radius: 5px;
    border:solid 3px #800080;
    padding: 10px;
}
 
 
        </style>
</head>     
<body>
<div class="container">
        <div class="content-top-left">
           <b> Что такое Lorem Ipsum?</b><br/>
Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является ...
        </div>
        <div class="content-top-center">
           <img src="cherep.jpg" alt="" />
        </div>
        <div class="content-top-right">
       <b>   Что такое Lorem Ipsum?</b><br/>
Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой".... 
        </div>
        
            <div class="content-center">
     <p class="left">
                Что такое Lorem Ipsum?
Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. 
            </p>
            
            <img src="assets/img/pramougolnaya.png" alt="kartinka pramougolnaya">
 
            <p class="right">
             Почему он используется?
Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться. Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а также реальное распределение букв и пробелов в абзацах, которое не получается при простой дубликации "Здесь ваш текст.. Здесь ваш текст.. Здесь ваш текст.." Многие программы электронной вёрстки и редакторы HTML используют Lorem Ipsum в качестве текста по умолчанию, так что поиск по ключевым словам "lorem ipsum" сразу показывает, как много веб-страниц всё ещё дожидаются своего настоящего рождения. За прошедшие годы текст Lorem Ipsum получил много версий. Некоторые версии появились по ошибке, некоторые - намеренно (например, юмористические варианты).
            </p>
        
            </div>
    
                <div class="left-bar">
        left-bar
                </div>
                    <div class="right-bar">
        right-bar
                    </div>
                  <div class="footer">footer</div>                   
                    
    </div>
</body>
 
</html>

@Vlad333 · 19.06.2020, 19:27 **[ТС]**

Soldado, ого заработало теперь надо разобраться в этом как то там только почемуто картинка не на своем месте и все а так вроде работает

@Vlad333 · 19.06.2020, 20:15 **[ТС]**

Soldado, Когда вставляю картинку <img src="assets/img/pramougolnaya.png" alt="kartinka pramougolnaya">
в <div class="content-top-center"> все рассыпается почемуто А правый верхний блок уезжает в лево в центр

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
36
37
<div class="container-1">
        <div class="content-top-left">
           <b> Что такое Lorem Ipsum?</b><br/>
Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является ...
        </div>
        <div class="content-top-center">
           <img src="assets/img/pramougolnaya.png" alt="kartinka 
        </div>
        <div class="content-top-right">
       <b>   Однако, на районе появился новый парниша по имени CSS Grid и у него очень много тех же возможностей, что и у Flexbox. В одних случаях, он даже лучше, чем Flexbox, в то время как в других совершенно нет.
Такой расклад событий вводит разработчиков в смятение. Поэтому, в этой статье мы сравним два модуля, как на микро, так и на макро уровнях.
        </div>
        
            <div class="content-center">
     <p class="left">
                Что такое Lorem Ipsum?
Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. 
            </p>
            
           
 
            <p class="right">
             Почему он используется?
Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться. Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а также реальное распределение букв и пробелов в абзацах, которое не получается при простой дубликации "Здесь ваш текст.. Здесь ваш текст.. Здесь ваш текст.." Многие программы электронной вёрстки и редакторы HTML используют Lorem Ipsum в качестве текста по умолчанию, так что поиск по ключевым словам "lorem ipsum" сразу показывает, как много веб-страниц всё ещё дожидаются своего настоящего рождения. За прошедшие годы текст Lorem Ipsum получил много версий. Некоторые версии появились по ошибке, некоторые - намеренно (например, юмористические варианты).
            </p>
        
            </div>
    
                <div class="left-bar">
        left-bar
                </div>
                    <div class="right-bar">
        right-bar
                    </div>
                  <div class="footer">footer</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
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
.container-1 {
 display: grid; 
 grid-template-areas:"top-left top-left top-center top-right top-right" "left center center center right" "footer footer footer footer footer";
 grid-template-columns:20% 50px 1fr 50px 20%;
 grid-template-rows: 150px 350px 100px;
}
 
.content-top-left {
      grid-area: top-left;
      border-radius: 5px;
    border:solid 3px #e3801c;
    text-align: justify; 
    padding: 10px;
}
.content-top-center {
      grid-area: top-center;
      border-radius: 5px;
    border:solid 3px #e21de2;
    text-align:center; 
    padding: 0;
} 
 
.content-top-center img {
    width: 10%;
}
.content-top-right {
      grid-area: top-right;
      border-radius: 5px;
    border:solid 3px #0e02a4;
     text-align: justify;
     padding: 10px; 
}
 
 
 
 
.content-center {
  grid-area: center;
    border-radius: 5px;
    border:solid 3px #32CD32;
    padding: 10px;
}
 
.left-bar {
     grid-area: left;
     border-radius: 5px;
    border:solid 3px #008B8B;
    padding: 10px;
}
 
.right-bar {
    grid-area: right;
     border-radius: 5px;
    border:solid 3px #800080;
    padding: 10px;
}
.footer {
    grid-area: footer;
     border-radius: 5px;
    border:solid 3px #800080;
    padding: 10px;
}

@Soldado · 19.06.2020, 21:18

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

Когда вставляю картинку <img src="assets/img/pramougolnaya.png" alt="kartinka pramougolnaya">

Нет. Не вставили как надо.
Посмотрите, что вставили на самом деле
Даже здесь видно, что в строке восемь закрытие дива подсвечено красным. С чего бы это?!
Используйте редактор с подсветкой кода. Например http://www.codelobster.com/download.html

Одиночный тег img - в конце должно быть />

HTML5
1
<img src="assets/img/pramougolnaya.png" alt="kartinka pramougolnaya"/>

@Vlad333 · 20.06.2020, 19:50 **[ТС]**

Soldado, ура заработало Спасибо друг , я научусь обязательно, С таким другом как ты обязательно

как же я мог пропустить такое, у меня соблайн текст я его поставил потму что в уроках которые смотрю там работают в нем. Ну а я так как незнаю еще в чем лучше работать тоже работаю в нем.

@Vlad333 · 20.06.2020, 21:13 **[ТС]**

Soldado, Я ничего не делал просто увеличил картинку и подправил там скобку и все а почему теперь блоки влево уехали?

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
36
37
<div class="container-1">
        <div class="content-top-left">
           <b> Что такое Lorem Ipsum?</b><br/>
Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является ...
        </div>
        <div class="content-top-center">
           <img src="assets/img/pramougolnaya.png" alt="kartinka">
        </div>
        <div class="content-top-right">
       <b>   Однако, на районе появился новый парниша по имени CSS Grid и у него очень много тех же возможностей, что и у Flexbox. В одних случаях, он даже лучше, чем Flexbox, в то время как в других совершенно нет.
Такой расклад событий вводит разработчиков в смятение. Поэтому, в этой статье мы сравним два модуля, как на микро, так и на макро уровнях.
        </div>
        
            <div class="content-center">
     <p class="left">
                Что такое Lorem Ipsum?
Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. 
            </p>
            
           
 
            <p class="right">
             Почему он используется?
Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться. Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а также реальное распределение букв и пробелов в абзацах, которое не получается при простой дубликации "Здесь ваш текст.. Здесь ваш текст.. Здесь ваш текст.." Многие программы электронной вёрстки и редакторы HTML используют Lorem Ipsum в качестве текста по умолчанию, так что поиск по ключевым словам "lorem ipsum" сразу показывает, как много веб-страниц всё ещё дожидаются своего настоящего рождения. За прошедшие годы текст Lorem Ipsum получил много версий. Некоторые версии появились по ошибке, некоторые - намеренно (например, юмористические варианты).
            </p>
        
            </div>
    
                <div class="left-bar">
        left-bar
                </div>
                    <div class="right-bar">
        right-bar
                    </div>
                  <div class="footer">footer</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
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
.container-1 {
 display: grid; 
 grid-template-areas:"top-left top-left top-center top-right top-right" "left center center center right" "footer footer footer footer footer";
 grid-template-columns:20% 50px 1fr 50px 20%;
 grid-template-rows: 150px 350px 100px;
}
 
.content-top-left {
      grid-area: top-left;
      border-radius: 5px;
    border:solid 3px #e3801c;
    text-align: justify; 
    padding: 10px;
}
.content-top-center {
      grid-area: top-center;
      border-radius: 5px;
    border:solid 3px #e21de2;
    text-align:center; 
    padding: 0;
} 
 
.content-top-center img {
    width: 80%;
}
.content-top-right {
      grid-area: top-right;
      border-radius: 5px;
    border:solid 3px #0e02a4;
     text-align: justify;
     padding: 10px; 
}
 
 
 
 
.content-center {
  grid-area: center;
    border-radius: 5px;
    border:solid 3px #32CD32;
    padding: 10px;
}
 
.left-bar {
     grid-area: left;
     border-radius: 5px;
    border:solid 3px #008B8B;
    padding: 10px;
}
 
.right-bar {
    grid-area: right;
     border-radius: 5px;
    border:solid 3px #800080;
    padding: 10px;
}
.footer {
    grid-area: footer;
     border-radius: 5px;
    border:solid 3px #800080;
    padding: 10px;
}

Новые блоги и статьи Все статьи Все блоги /
Первый деплой lagorue 16.01.2026 Не спеша развернул своё 1ое приложение в kubernetes. А дальше мне интересно создать 1фронтэнд приложения и 2 бэкэнд приложения развернуть 2 деплоя в кубере получится 2 сервиса и что-бы они. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит токи на L и напряжения на C в установ. режимах до и. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?
Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .

Расположение элементов

Решение

Решение

@Vlad333 2 / 1 / 0 Регистрация: 02.04.2017 Сообщений: 122
	19.06.2020, 08:01 [ТС]
	Блин не работает так как надо сначало должно идти текст картинка текст а потом снизу разноцветные блоки Миниатюры 0

@Soldado 901 / 833 / 198 Регистрация: 28.06.2012 Сообщений: 1,607 Записей в блоге: 4
	19.06.2020, 12:36
	Может я не прав и просто есть другие ошибки. 0

@Vlad333 2 / 1 / 0 Регистрация: 02.04.2017 Сообщений: 122
	19.06.2020, 12:46 [ТС]
	Soldado, Я незнаю я по интернетке где че подсмотрю и пробую, а кое что с уроков списываю, я даже еще незнаю как его понять этот грид и флекс ну в общем понимаю а написать еще не могу 0

@Vlad333 2 / 1 / 0 Регистрация: 02.04.2017 Сообщений: 122
	19.06.2020, 14:11 [ТС]
	Soldado, не работает так как надо этот код 0

@Soldado 901 / 833 / 198 Регистрация: 28.06.2012 Сообщений: 1,607 Записей в блоге: 4
	19.06.2020, 14:23
	Вот крупнее Миниатюры 0

@Vlad333 2 / 1 / 0 Регистрация: 02.04.2017 Сообщений: 122
	19.06.2020, 14:44 [ТС]
	Soldado, вот картинка Миниатюры 0

@Vlad333 2 / 1 / 0 Регистрация: 02.04.2017 Сообщений: 122
	19.06.2020, 14:49 [ТС]
	Soldado, и еще хотел узнать для img картинки можно задать класс? в интернетке что то не говорят про это 0

@Vlad333 2 / 1 / 0 Регистрация: 02.04.2017 Сообщений: 122
	19.06.2020, 19:27 [ТС]
	Soldado, ого заработало теперь надо разобраться в этом как то там только почемуто картинка не на своем месте и все а так вроде работает 0

@Vlad333 2 / 1 / 0 Регистрация: 02.04.2017 Сообщений: 122
	20.06.2020, 19:50 [ТС]
	Soldado, ура заработало Спасибо друг , я научусь обязательно, С таким другом как ты обязательно как же я мог пропустить такое, у меня соблайн текст я его поставил потму что в уроках которые смотрю там работают в нем. Ну а я так как незнаю еще в чем лучше работать тоже работаю в нем. 0