Блоки div с float криво выстраиваются

@allukard · Регистрация: 08.11.2010

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

Есть фотогалерея которая выводится из БД. Фотки подписываются Но если текста много то блоки прыгают непонятно как..
хотелось бы сделать такой вид:

ну что бы норм выглядело. вот кстати статья все прочитал но чтот ника.

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Документ без названия</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="content"><!--start content-->
 
<div class="gallery_vcat"><!--start gallery_vcat-->
<div id="gallery_mini_img_vcat">
<img src="img.jpg"  alt="" class="mini_foto_g"/>
</div>
<div id = "text_album">Text_1</div>
</div>
 
<div class="gallery_vcat"><!--start gallery_vcat-->
<div id="gallery_mini_img_vcat">
<img src="img.jpg"  alt="" class="mini_foto_g"/>
</div>
<div id = "text_album">Pandas sdsd s dffdf sfsdffsf sfd sfsf sffs fsPandas sdsd s dffdf sfsdffsf sfd sfsf sffs fsPandas sdsd s dffdf sfsdffsf sfd sfsf sffs fsPandas sdsd s dffdf sfsdffsf sfd sfsf sffs fs</div>
</div>
 
<div class="gallery_vcat"><!--start gallery_vcat-->
<div id="gallery_mini_img_vcat">
<img src="img.jpg"  alt="" class="mini_foto_g"/>
</div>
<div id = "text_album">Text_3dffsf sfd sfsf sffs fsPandas sdsd s dffdf sfsdffsf sfd sfsf sffs fsPandas sdsd s dffdf sfsdffsf sfd sfsf sffs</div>
</div>
 
 
<div class="gallery_vcat"><!--start gallery_vcat-->
<div id="gallery_mini_img_vcat">
<img src="img.jpg"  alt="" class="mini_foto_g"/>
</div>
<div id = "text_album">Text_4dffsf sfd sfsf sffs fsPandas sdsd s dffdf sfsdffsf sfd sfsf sffs fsPandas sdsd s dffdf sfsdffsf sfd sfsf sffs</div>
</div>
 
<div class="gallery_vcat"><!--start gallery_vcat-->
<div id="gallery_mini_img_vcat">
<img src="img.jpg"  alt="" class="mini_foto_g"/>
</div>
<div id = "text_album">Text_5dffsf sfd sfsf sffs fsPandas sdsd s dffdf sfsdffsf sfd sfsf sffs fsPandas sdsd s dffdf sfsdffsf sfd sfsf sffs</div>
</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
#content{
    /*background-color:#fff;*/
    background-image:url(img_wild_strawberry/background_bottom.png);
    background-repeat:repeat-x;
    background-color:#d2e2ee;
    margin-left:0px;
    padding:10px;
    font-family:Verdana, Geneva, sans-serif;
    font-size:12px;
    width:680px;
    min-height:200px;
    float:left;
    color:#0A101A;
}
#content .gallery_vcat{ 
    float: left;
    width: 30%;
    border: 1px solid #d9d9d9;
    margin:10px;
}
#gallery_mini_img_vcat { 
    float: none;
    border: 1px solid #d9d9d9;
    margin:6px;
    text-align:center;
}
.mini_foto_g{margin:5px; border: 0px; max-width: 94%; max-height: 100%; width: auto;}
#text_album{border: 0px; width:94%;margin:5px;}

@allukard · 17.05.2012, 08:36 **[ТС]**

а выводит так:

Vovan-VE · 17.05.2012, 18:44

Вместо float'ов:

CSS
1
2
3
4
5
display: inline-block;
vertical-align: top;
/* IE7 */
*display: inline;
zoom: 1;

@allukard · 19.05.2012, 08:57 **[ТС]**

Vovan-VE Благодарю за помощь!

Новые блоги и статьи Все статьи Все блоги /
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .

@allukard 307 / 218 / 70 Регистрация: 08.11.2010 Сообщений: 1,899
	17.05.2012, 08:36 [ТС]
	а выводит так: 0

@allukard 307 / 218 / 70 Регистрация: 08.11.2010 Сообщений: 1,899
	19.05.2012, 08:57 [ТС]
	Vovan-VE Благодарю за помощь! 0