float: left

@epog333 · Регистрация: 16.01.2011

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

У меня выводится 4 изображения в горизонтальном порядке и до бесконечности в вертикальном.
CSS:

CSS
1
2
3
4
5
6
#img {
        float: left;
        width: 200px;
        height: 150px;
        margin: 10px;
}

HTML:

HTML5
1
<a href='view.php?id=$mass[id]'><img src='traffic/$mass[url]' id='img'/></a>

Мне надо, чтобы под каждым изображением выводилось ещё одно значение, допустим текст Привет (позже вставлю переменную), как реализовать? Делаю таблицей у меня всё сползает или отображает только три изображения, прошу вашей помощи.

@m@tem@tik · 05.03.2013, 22:36

Ты тиражирование изображений сделал?

Можно поинтересоваться, для чего тебе это?

@epog333 · 05.03.2013, 22:39 **[ТС]**

Ниже каждого изображения хочу вывести дату или количество комментариев

@EPMAK · 05.03.2013, 22:49

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
a{ width: 224px; border: 1px solid blue; display: inline-block; }
 
.img {
        float: left;
        width: 200px;
        height: 150px;
        margin: 10px;
        border: 1px solid red;
}
a img+span{
display: block;
float: left;
}
</style>
<a href="">
 <img src="" class="img" alt="pic">
 <span>Hello world</span>
</a>

Попробуй, может подойдет. Бордюрки для наглядности ставил.

@epog333 · 05.03.2013, 22:52 **[ТС]**

EPMAK, Спасибо большое, работает!

@EPMAK · 05.03.2013, 22:56

На всякий случай, ещё вариант решения.

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
<style>
.wrap { width: 940px; }
a{ float: left; border: 1px solid blue; display: block; margin:.1em; }
 
.img {
        
        width: 200px;
        height: 150px;
        margin: 10px;
        border: 1px solid red;
}
a img+span{
display: block;
text-align: center;
}
</style>
<div class="wrap">
<a href="">
 <img src="" class="img" alt="pic">
 <span>Hello world</span>
</a>
<a href="">
 <img src="" class="img" alt="pic">
 <span>Hello world2</span>
</a>
<a href="">
 <img src="" class="img" alt="pic">
 <span>Hello world3</span>
</a>
<a href="">
 <img src="" class="img" alt="pic">
 <span>Hello world4</span>
</a>
<a href="">
 <img src="" class="img" alt="pic">
 <span>Hello world5</span>
</a>
</div>

@epog333 · 05.03.2013, 22:58 **[ТС]**

EPMAK, Я думаю этот не уместен будет, я вывожу изображения через цикл, а здесь только на статичной странице, так ведь?

@EPMAK · 05.03.2013, 23:06

Это пример , для наглядности, что теги A, который будут созданы в цикле, встанут так как и на твоем скрине выше.
Стили должны подойти.

Обрати внимание что я заменил #img на .img ..

#img <-- должен быть только один на странице.
.img <-- любое количество на странице.
Это важно для обработки тегов каким нибудь яваскрипт сценарием.

@epog333 · 05.03.2013, 23:08 **[ТС]**

EPMAK, Я с первым вариантом уже разобрался, всё прекрасно работает, ещё раз спасибо)

Новые блоги и статьи Все статьи Все блоги /
Отправка уведомления на почту при изменении наименования справочника Maks 24.03.2026 Программная отправка письма электронной почты на примере изменения наименования типового справочника "Склады" в конфигурации БП3. Перед реализацией необходимо выполнить настройку системной учетной. . .	модель ЗдравоСохранения 5. Меньше увольнений- больше дохода! anaschu 24.03.2026 Теперь система здравосохранения уменьшает количество увольнений. 9TO2GP2bpX4 a42b81fb172ffc12ca589c7898261ccb/ https:/ / rutube. ru/ video/ a42b81fb172ffc12ca589c7898261ccb/ Слева синяя линия -. . .	Midnight Chicago Blues kumehtar 24.03.2026 Такой Midnight Chicago Blues, знаешь?. . Когда вечерние улицы становятся ночными, а ты не можешь уснуть. Ты идёшь в любимый старый бар, и бармен наливает тебе виски. Ты смотришь на пролетающие. . .	SDL3 для Desktop (MinGW): Вывод текста со шрифтом TTF с помощью библиотеки SDL3_ttf на Си и C++ 8Observer8 24.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-text-sdl3-c. zip finish-text-sdl3-cpp. zip
Жизнь в неопределённости kumehtar 23.03.2026 Жизнь — это постоянное существование в неопределённости. Например, даже если у тебя есть список дел, невозможно дойти до точки, где всё окончательно завершено и больше ничего не осталось. В принципе,. . .	Модель здравоСохранения: работники работают быстрее после её введения. anaschu 23.03.2026 geJalZw1fLo Корпорация до введения программа здравоохранения имела много невыполненных работниками заданий, после введения программы количество заданий выросло. Но на выплатах по больничным это. . .	Контроль уникальности заводского номера Maks 23.03.2026 Алгоритм контроля уникальности заводского (или серийного) номера на примере нетипового документа выдачи шин для спецтехники с табличной частью, разработанного в конфигурации КА2. Номеклатура. . .	Хочу заставить корпорации вкладываться в здоровье сотрудников: делаю мат модель здравосохранения anaschu 22.03.2026 e7EYtONaj8Y Z4Tv2zpXVVo https:/ / github. com/ shumilovas/ med2. git

@m@tem@tik 15 / 15 / 0 Регистрация: 22.10.2012 Сообщений: 336
	05.03.2013, 22:36
	Ты тиражирование изображений сделал? Можно поинтересоваться, для чего тебе это? 0

@epog333 2 / 2 / 1 Регистрация: 16.01.2011 Сообщений: 256
	05.03.2013, 22:39 [ТС]
	Ниже каждого изображения хочу вывести дату или количество комментариев Миниатюры 0

@epog333 2 / 2 / 1 Регистрация: 16.01.2011 Сообщений: 256
	05.03.2013, 22:52 [ТС]
	EPMAK, Спасибо большое, работает! 0

@epog333 2 / 2 / 1 Регистрация: 16.01.2011 Сообщений: 256
	05.03.2013, 22:58 [ТС]
	EPMAK, Я думаю этот не уместен будет, я вывожу изображения через цикл, а здесь только на статичной странице, так ведь? 0

@EPMAK tribal dance 168 / 156 / 36 Регистрация: 03.09.2009 Сообщений: 820 Записей в блоге: 17
	05.03.2013, 23:06
	Это пример , для наглядности, что теги A, который будут созданы в цикле, встанут так как и на твоем скрине выше. Стили должны подойти. Обрати внимание что я заменил #img на .img .. #img <-- должен быть только один на странице. .img <-- любое количество на странице. Это важно для обработки тегов каким нибудь яваскрипт сценарием. 0

@epog333 2 / 2 / 1 Регистрация: 16.01.2011 Сообщений: 256
	05.03.2013, 23:08 [ТС]
	EPMAK, Я с первым вариантом уже разобрался, всё прекрасно работает, ещё раз спасибо) 0