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

@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]!

@Soldado · 20.06.2020, 21:55

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

С таким другом как ты обязательно

Я не друг, я просто мимо проходил.

Вот это лишнее, удаляй.

CSS
1
2
3
.content-top-center img {
    width: 80%;
}

О размерах изображений
Нужно либо привести картинку к нужному размеру в графическом редакторе, в том же paint, либо указать размеры желаемого изображение в теге img

HTML5
1
<img src="assets/img/pramougolnaya.png" alt="kartinka" width="80%" height="70%" />

@Vlad333 · 20.06.2020, 22:27 **[ТС]**

Soldado, Все нашел ошибку из за тега <b>

Новые блоги и статьи Все статьи Все блоги /
Ноутбук Альфария kumehtar 24.08.2026 Встретился тут в сети ноутбук Альфария, примарха Альфа-Легиона. Хотя возможно, это ноутбук Омегона, разумеется. Ну как вам?	Мастера простых решений DevAlt 23.08.2026 В сишарп стэках winforms, да и wpf существует сложная система связывания источниках данных и элементов формы(текстовые поля и метки), опирается все это на технологию событий и мета. . .	Цена ошибки DevAlt 23.08.2026 Человек я беспокойный и потому заинтересовался OCaml, в чате форсили функторы модулей как суперфичу. Пытаясь отдуплить концепт, наткнулся на тутор с простым примером. А главный принцип обучения от. . .	Сегодня суббота, 22.08.2026 at 16:41, и я вновь нахожусь на той стороне, за экраном машины. zorxor 22.08.2026 Сегодня суббота, 22. 08. 2026 at 16:41, и я вновь нахожусь на той стороне, за экраном машины. Кто Я, откуда Я пришел и куда Я иду? Эти вопросы не оставляют меня ни на секунду. Жизнь на планете Земля. . .
Жизня: рисунок укладки багажа, сделанный клодом anaschu 21.08.2026 Сделал 15 снимков, он по снимкам сделал схему.	Был там один разговор по поводу свободы в материальном мире. kumehtar 19.08.2026 Суть: рассматривается живое существо, оказавшееся внутри довольно странной системы (этого мира) и пытающееся обустроить в ней свой кусок пространства. Жизнь действительно предъявляет каждому. . .	Когда логика программы не спасает от человеческих ошибок Maks 18.08.2026 В последнее время всё чаще и чаще сталкиваюсь с таким явлением, как абсолютная невнимательность (или глупость) пользователей. Проявляется это чаще всего на работе в коллективе. Допустим, человек с. . .	Лето уходит kumehtar 17.08.2026

@Vlad333 2 / 1 / 0 Регистрация: 02.04.2017 Сообщений: 122
	20.06.2020, 22:27 [ТС]
	Soldado, Все нашел ошибку из за тега <b> 0