Как расположить картинки строго напротив текстов?

@nichego neznayka · Регистрация: 03.03.2019

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

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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<html>
<head>
<link rel="stylesheet" type="text/css" href="new 1.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
        $("a[href^='#']").click(function(){
                var _href = $(this).attr("href");
                $("html, body").animate({scrollTop: $(_href).offset().top+"px"});
                return false;
        });
});
</script>
<head>
<title>animacia</title>
<body>
<a id="totop"></a>
<div id="header2">                                     <!-- шапка -->
<h1 align="center">История анимации</h1> 
</div>
<div class="totop">
<a href="#totop"> <img src = "pictures/totop.png" width="125px"></a>
</div>
<div id="first">
<div id="content2">
</br>
</br>
</br>
<div class="text1">
<p align="justify">
На протяжении всего своего существования человек пытался отразить движение в своем искусстве. Первые попытки передачи движения в рисунке  относятся примерно к 2000 году до нашей эры (Египет).
</p>
</div>
<img src = "pictures/eg.jpg" width="125px"/>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
<div class="text2">
<p align="justify">
Еще один пример движения найден в пещерах Северной Испании: это рисунок кабана с восемью ногами.
</p>
</div>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
<div class="text1">
<p align="justify">
В Шахр-и Сохта (Иран) был найден глиняный сосуд, возраст которого оценивается в 5000 лет. На стенках сосуда сделано 5 изображений козла в движении.
</p>
</div>
</div>
</div>
<div id="second">
<div id="content2">
</br>
</br>
<div class="text2">
<p align="justify">
Впервые принцип инертности зрительного восприятия, лежащий в основе анимации, был продемонстрирован в 1828 году французом Паулем Рогетом.
</p>
</div>
</br>
</br>
</br>
<div class="text1">
<p align="justify">
Объектом демонстрации был диск, на одной стороне которого находилось изображение птицы, а на другой – клетки. Во время вращения диска у зрителей создавалась иллюзия птицы в клетке.
</p>
</div>
</br>
</br>
</br>
<div class="text2">
<p align="justify">
Бурное развитие анимации началось в начале 20 века. Джордж Меллис случайно изобрел технику съемки, называемую «stop-motion». Суть этой техники заключалась в следующем: Мелис снимал кадр, затем менял что-то в снимаемой сцене, затем снимал следующий кадр и так далее. После чего, быстро сменяя эти кадры, добивался анимационного эффекта.
</p>
</div>
</br>
</br>
</br>
<div class="text1">
<p align="justify">
Винзор МакКей создал первый анимационный мультфильм в 1906 году.
</p>
</div>
</br>
</br>
</br>
<div class="text2">
<p align="justify">
Первый реальный практический способ создания анимации был получен в результате создания Томом А. Едисоном (Thomas A. Edison) фотокамеры и проектора.
</p>
</div>
</br>
</br>
</br>
<div class="text1">
<p align="justify">
Уже в 1906 году Стюардом Блактоном был создан короткий фильм «Забавные выражения веселых лиц» (Humorous Phases of Funny Faces). Автор выполнял на доске рисунок, фотографировал, стирал, а затем вновь рисовал, фотографировал и стирал…
</p>
</div>
</br>
</br>
</br>
<div class="text2">
<p align="justify">
Настоящую революцию в мире анимации произвел УОЛТ ДИСНЕЙ (1901-1966), американский режиссер, художник и продюсер. Уолт Дисней был первым, кто использовал звук в анимации. Дисней также был одним из пионером в использовании 
цвета в анимации. 
</p>
</div>
</br>
</br>
</br>
<div class="text1">
<p align="justify">
Одним из наиболее существенных нововведений студии было изобретение многоплоскостной камеры, позволявшей получать эффекты параллакса, вытянутых форм фигур, глубины и нечеткости. 
</p>
</div>
</br>
</br>
</br>
<div class="text2">
<p align="justify">
Его студией создано множество анимаций, персонажи которых известны по сей день (Микки Маус, Плутто, Гуффи и т.д.). 
</p>
</div>
</br>
</br>
</br>
<div class="text1">
<p align="justify">
Коммерческий успех первых аниматоров широкого показа создал почву для появления новых анимационных студий.
</p>
</div>
</div>
</div>
</body>
<script>
$(window).scroll(function() {
if ($(this).scrollTop() > 1){
$('#header2').addClass("glide");
}
else{
$('#header2').removeClass("glide");
}
});
</script>
</html>

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
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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
@font-face {
font-family:"Roboto Regular";
src: url("3966.ttf") format("TrueType"); 
font-style: normal; 
font-weight: normal; 
}
 
#header1{
text-align: center;
font-size: 80px;
line-height: 160px;            
height: 165px;            
background:url("pictures/boyyy.jpg");
background-size: cover;
margin: 0 auto;
width: 100%;
color: #fff;            
// set animation            
 -webkit-transition: all 0.3s ease;           
transition: all 0.3s ease;                                                          
}
 
#header1.glide {
    position: fixed;
    font-size: 30px;
    line-height: 37px;
    height: 40px;
    width: 100%;
    background: #808080;
    color: #000;
    text-align: left;
    padding-left: 15px;
}
 
#header2{
 
text-align: center;
font-size: 80px;
line-height: 160px;
height: 165px;
background:url("pictures/mam.jpg") ;
background-size: cover;
margin: 0 auto;
width: 100%;
// set animation
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease; 
color: #fff;            
}
 
#header2.glide {
position: fixed;
font-size: 30px;
line-height: 37px;
height: 40px;
width: 100%;
background: #808080;
text-align: center;
padding-left: 15px;
color: #000;
}
 
h1{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
 
h2{
font-size: 60px;
margin: 0 auto;
padding-left:150px;
padding-right:150px;
}
 
body{
font-family: Roboto Regular,"Open Sans",sans-serif;
background-color: #000;
background-attachment:fixed;
-webkit-background-size:100%;
margin: 0 auto;
 
}
 
#first{
background: url(pictures/hourses.jpg) no-repeat fixed ;
height: 780px;
margin: 0 auto;
overflow: hidden;
padding: 0;
background-size: cover;
color: #fff;
}
 
#second{
background: url(pictures/carusel.jpg) no-repeat fixed ;
height: 2180px;
margin: 0 auto;
overflow: hidden;
padding: 0;
background-size: cover;
color: #fff;
}
 
#second2{
background-color: #fff;     
color: #000;
}
 
#first2{
background-color: #000; 
color: #fff;
}
 
.text1{
width: 1200px;  
}
 
.text2{
width: 570px;   
margin-left: 570px;
}
 
p{
font-size: 22px;
padding-left: 1px;
padding-right: 1px;
}
                                                         
.center-pic{
display: block;
margin: auto;
}
 
#content1{
width: 1150px;
margin: 0 auto;
}
 
#content2{
width: 1150px;
margin:auto;
}
 
.totop{
position: fixed;
bottom: -15px;
right: 0px;
}

@novichek_1905 · 03.09.2019, 15:07

Сообщение от nichego neznayka

Не по теме:

это некорректно, подобные отступы реализуются margin-bottom

Сообщение от nichego neznayka

как расположить картини строго напротив текстов?

измените вложенность. Сделайте блок, в него положите картинку + текст и с помощью flex, расположите горизонтально

Например:

HTML5
1
2
3
4
<div class="img-box">
  <img src="https://www.placehold.it/240" alt="">
  <p>Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Жизни вдали, что дорогу своего рукописи языкового. Его, жаренные рекламных то одна вопроса семь дорогу. Пор букв инициал эта алфавит?</p>
</div>

CSS
1
2
3
4
5
6
7
.img-box{
  display: flex;
}
.img-box img{
  margin-right: 20px;
  flex-shrink: 0;
}

Новые блоги и статьи Все статьи Все блоги /
Вопросы на собеседованиях по микросервисам ArchitectMsa 27.03.2025 Работодатели ищут не просто разработчиков, знающих базовые концепции, а специалистов, разбирающихся в тонкостях масштабирования, отказоустойчивости и производительности. Сейчас на первый план выходят. . .	Взаимодействие Python с REST API py-thonny 27.03.2025 REST API - это архитектурный стиль взаимодействия компонентов распределённого приложения в сети. Python располагает функциональным набором инструментов для работы с REST API и основная библиотека для. . .	sshd restrictions, ssh access limitations jigi33 26.03.2025 sshd restrictions \| ssh access limitations рестрикции доступа на сервер sshd статья: https:/ / www. golinuxcloud. com/ restrict-allow-ssh-certain-users-groups-rhel	Компиляция C++ с Clang API NullReferenced 24.03.2025 Компиляторы обычно воспринимаются как черные ящики, которые превращают исходный код в исполняемые файлы. Мы запускаем компилятор командой в терминале, и вуаля — получаем бинарник. Но что если нужно. . .	Многопоточное программирование в C#: Класс Thread UnmanagedCoder 24.03.2025 Когда запускается приложение на компьютере, операционная система создаёт для него процесс - виртуальное адресное пространство. В C# этот процесс изначально получает один поток выполнения — главный. . .
SwiftUI Data Flow: Передача данных между представлениями mobDevWorks 23.03.2025 При первом знакомстве со SwiftUI кажется, что фреймворк предлагает избыточное количество механизмов для передачи данных: @State, @Binding, @StateObject, @ObservedObject, @EnvironmentObject и другие. . . .	Моки в Java: Сравниваем Mockito, EasyMock, JMockit Javaican 23.03.2025 Как протестировать класс, который зависит от других сложных компонентов, таких как базы данных, веб-сервисы или другие классы, с которыми и так непросто работать в тестовом окружении? Для этого и. . .	Архитектурные паттерны микросервисов: ТОП-10 шаблонов ArchitectMsa 22.03.2025 Популярность микросервисной архитектуры объясняется множеством важных преимуществ. К примеру, она позволяет командам разработчиков работать независимо друг от друга, используя различные технологии и. . .	Оптимизация рендеринга в Unity: Сортировка миллиона спрайтов GameUnited 22.03.2025 Помните, когда наличие сотни спрайтов в игре приводило к существенному падению производительности? Время таких ограничений уходит в прошлое. Сегодня геймдев сталкивается с задачами совершенно иного. . .	Образование и практика Igor3D 21.03.2025 Добрый день А вот каково качество/ эффективность ВУЗовского образования? Аналитическая геометрия изучается в первом семестре и считается довольно легким курсом, что вполне справедливо. Ну хорошо,. . .

Опции темы