3 блок съехал ниже остальных, почему?

@Z1K1 · Регистрация: 18.11.2014

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

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
<!DOCTYPE html>
<html>
    <head>
        <title>Main - Portfolio</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div id="main">
            <div id="header">
                <div id="logo"><img src="img/logo.png"></div>
                <div id="contactu">
                    <table>
                        <tr><td><font>Телефон: +********** <br> E-mail: *****@gmail.com<br>Skype: ******</font></td></tr>
                    </table>
                </div>
                <div id="sortirovka">
                    <font>Сортувати за тематикою: <a href="#">Заробіток</a> |<a href="#">Інтернет-магазин</a> <br>Сортувати за типом: <a href="#">Сайт-візитка</a> |<a href="#">Тип2</a> |<a href="#">Тип3</a></font>
                </div>
            </div>
            <div id="content">
                <hr></hr><br><br>
            <a href="http://best-random.besaba.com/" target="_blank">
            <div class="block">
                <div class="previev"><img src="img/1.png"></div>
                <div class="description">
                    <div class="topic"><font>ЗАГОЛОВОК</font></div>
                    <div class="text"><font>ТЕКСТ.</font></div>
                </div>
            </div>
            </a>
            <a href="http://124124124124.esy.es/" target="_blank">
            <div class="block">
                <div class="previev"><img src="img/2.png"></div>
                <div class="description">
                    <div class="topic"><font>ЗАГОЛОВОК</font></div>
                    <div class="text"><font>ТЕКСТ.</font></div>
                </div>
            </div>
            </a>
            <a href="#" target="_blank">
            <div class="block">
                <div class="previev"><img src="img/4.png"></div>
                <div class="description">
                    <div class="topic"><font>ЗАГОЛОВОК</font></div>
                    <div class="text"><font>ТЕКСТ.</font></div>
                </div>
            </div>
            </a>
                <a href="#" target="_blank">
            <div class="block">
                <div class="previev"><img src="img/5.png"></div>
                <div class="description">
                    <div class="topic"><font>ЗАГОЛОВОК</font></div>
                    <div class="text"><font>ТЕКСТ.</font></div>
                </div>
            </div>
                </a>
            <a href="http://web2.890m.com/" target="_blank">
            <div class="block">
                <div class="previev"><img src="img/3.png"></div>
                <div class="description">
                    <div class="topic"><font>ЗАГОЛОВОК</font></div>
                    <div class="text"><font>ТЕКСТ.</font></div>
                </div>
            </div>
            </a>
            <hr></hr>
            </div>
            <div id="footer">
                <font> &copy; *** | 2014 - 2015</font>
            </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
114
115
116
117
118
119
body {
    background: black;
    background-image: url(img/bg.png);
    background-repeat: no-repeat;
    background-size: 100%;
    text-align: left;
    margin: 0 auto;
    font-family: sans-serif;
}
 
font {
    color: white;
}
 
a {
    margin: 5px 0 0 5px;
    color: darkgrey;
    transition: all 0.5s;
}
a:hover {
    color: white;
    transition: all 0.5s;
}
 
hr {
    width: 90%;
    border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
 
#main {
    width: 1200px;
    height: 1000px;
    margin: 0 auto;
}
/*Header*/
#header {
    width: 1200px;
    height: 430px;
}
#logo {
    float: left;
}
#contactu {
    float: right;
    margin: 20px 20px;
}
#contactu font {
    font-style: italic;
}
#contactu table{
    padding: 10px;
    border: 1px solid #e3e3e3;
    border-radius: 5px;
}
#sortirovka {
    margin: 60px 90px 40px 90px;
    float: left;
}
/**/
/*Content*/
#content {
    width: 1200px;
    height: 800px;
    padding: 10px;
}
.block {
    width: 380px;
    height: 400px;
    margin: 10px 9px;
    float: left;
    text-align: center;
    white-space: normal;
    transition: all 0.8s;
}
.block font {
    color: white;
}
.block img {
    height: 220px;
    width: 370px;
    box-shadow: 1px 1px 7px #777;
    transition: all 0.6s;
}
.block img:hover {
    transform: scale(1.25);
    transition: transform 0.5s;
}
.previev {
    width: 370px;
    height: 220px;
    background-color: #ffffff;
    border: 5px solid white;
}
.description {
    width: 380px;
    height: 170px;
}
.topic {
    padding: 10px;
    font-weight: bold;
    font-size: 18pt;
}
.topic font {
    color: #b7b6b6;
}
.text {
    text-align: left;
    padding: 10px;
    white-space: normal;
}
/**/
/*FOOTER*/
#footer {
    text-align: center;
    margin: 100px 0px 50px 0px;
}

Ссылка на скриншот:

@Vadim_Lasso · 08.11.2015, 19:35

Z1K1, добавить:

CSS
1
2
3
#content > a {
    display: block;
}

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! в-строка - входное арифметическое выражение в инфиксной(обычной). . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .