Все фото слева, а текст справа. Нужно свой текст под своим фото

@blogak · Регистрация: 19.09.2013

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

Вот такая ситуация, довльно простая, но до меня никак не допрёт как это сделать..

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
<html>
<head>
<title>Мир Фактов</title>
<link type="text/css" rel="stylesheet" href="style.css"/>
</head>
<body>
<div id="wrap">
<div id="header"> <img src="images/logo.png" />
<div id="nav">
<ul class="menu">
<li class="current_page_item"><a href="index.html">Главная</a></li>
<li><a href="category.html">Разделы</a>
<ul class="sub-menu">
<li><a href="#">Города и страны</a></li>
<li><a href="#">Изобретения</a></li>
<li><a href="#">Интернет</a></li>
<li><a href="#">История</a></li>
<li><a href="#">Космос</a></li>
<li><a href="#">Природа</a></li>
<li><a href="#">Разное</a></li>
</ul>
<li><a href=".html">ТОП20</a>
</li>
</div>
<br><br><br>
<hr>
<font color="#00CBFF" size="+3">Грядущая зима может стать самой морозной за последние столетия.<br></font><br><font color="#ffffff" size="+1"><p>
<img src="images/zima1.jpg" align="bottom">
Несколько авторитетных метеослужб заявляют, что грядущая зима в Европе пополнит список зим 21 века с аномальными морозами, и даже может стать самой холодной зимой за последние 100 лет. Данный прогноз основан на расчете климатических индексов, из чего следует, что зимой в Европу будет происходить перенос арктических воздушных масс и масс с северо-востока.</p>
<p><img src="images/zima2.jpg" align="bottom">
Кроме того, жестокую зиму предвещают так называемая отрицательная североатлантическая осцилляция и снижение солнечной активности. Начало подобного климатического цикла имело место в 50-х годах 20 века, когда аномальные морозы держались не только всю зиму, но и начало весны. 
При этом метеорологи заявляют, что более точно спрогнозировать характер будущей зимы можно будет только через несколько месяцев, когда у них будут уточненные данные.</font></p>
<div id="footer">
<hr>
<p class="copyright"><font color="#ffffff">Copyright &copy;</font></p>
</div>
</div>
</body>
</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
body{
    background:#2E6799;
}
   
   A {
    color: #31B3F8; /* Цвет ссылок */
   }
   A:visited {
    color: #31B3F8; /* Цвет посещенных ссылок */
   }
      
 
#wrap{
    width:960px;
    margin:0 auto;
 
}
.line  {
 border-top: 1px dashed #31B3F8;
 
}
#header{
    height:150px;
    padding:45px 0 0 0;
}
#header img, #header h1{
    float:left;
}
 
#header h1{
    margin:32px 0 0 5px;
}
 
#nav{
    float:center;
    margin:25px -15px 0 0;
}
.menu{
    padding:7px 6px 0 0;
 
}
li {
  list-style: none;
 
}
.menu li{
    margin:0 5px;
    padding:0 0 8px;
    float:left;
    position:relative;
}
.menu a{
    display:block;
    padding: 8px 15px;
    margin:0;
    color:#ffffff;
    text-decoration:none;
    font-size:22px;
}
.menu .current a, .menu li:hover > a{
    color:#00CBFF;
}
.menu ul li:hover a, .menu li:hover li a{
    color:#000;
}
.menu ul a:hover{
    background:#ffffff !important;
    color:#00CBFF !important;
}
.menu ul{
    background:#eee;
    display:none;
    margin:0;
    padding:0;
    width:250px;
    position:absolute;
    top:35px;
    left:20px;
    border:solid 1px #ddd;
}
.menu li:hover > ul{
    display:block;
}
.menu ul li{
    float:none;
    margin:0;
    padding:0;
}
.menu ul a{
    font-size:16px;
}
.menu ul ul{
    left:250px;
    top:-3px;
}
.menu li.current_page_item a{
    color:#00CBFF;
}
.menu .sub-menu li.current_page_item a{
    color:#00CBFF;
}
 
#footer{
    float:left;
    margin:20px 0 0 0;
    padding:15px 0 50px 0;
    width:100%;
}
 
.leftimg {
    float:left; 
    margin: 7px 7px 7px 0;
   }

@Goal · 23.09.2013, 11:25

создай блок, который содержит фото, установи его ширину до размера родительского блока(ну в котором данный блок и текст)
Тогда текст будет под фото))

@ezulex · 23.09.2013, 19:38

Можно по-старинке, создать таблицу.

@logincyberforu · 23.09.2013, 19:44

а типа chr(10) ?

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Первый деплой lagorue 16.01.2026 Не спеша развернул своё 1ое приложение в kubernetes. А дальше мне интересно создать 1фронтэнд приложения и 2 бэкэнд приложения развернуть 2 деплоя в кубере получится 2 сервиса и что-бы они. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит: токи, напряжения и их 1 и 2 производные при t = 0;. . .	Восстановить юзерскрипты 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. Программа предоставляет более. . .

@Goal Футболист 533 / 435 / 142 Регистрация: 31.10.2011 Сообщений: 1,010
	23.09.2013, 11:25
	создай блок, который содержит фото, установи его ширину до размера родительского блока(ну в котором данный блок и текст) Тогда текст будет под фото)) 0

@ezulex 10 / 10 / 2 Регистрация: 22.09.2013 Сообщений: 59
	23.09.2013, 19:38
	Можно по-старинке, создать таблицу. 0

@logincyberforu 30 / 31 / 0 Регистрация: 26.08.2013 Сообщений: 282
	23.09.2013, 19:44
	а типа chr(10) ? 0