Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.57/7: Рейтинг темы: голосов - 7, средняя оценка - 4.57
 Аватар для epog333
2 / 2 / 1
Регистрация: 16.01.2011
Сообщений: 256

float: left

05.03.2013, 22:31. Показов 1522. Ответов 8
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
У меня выводится 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>
Мне надо, чтобы под каждым изображением выводилось ещё одно значение, допустим текст Привет (позже вставлю переменную), как реализовать? Делаю таблицей у меня всё сползает или отображает только три изображения, прошу вашей помощи.
0
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
05.03.2013, 22:31
Ответы с готовыми решениями:

Ошибка при создании трех колонок (float:left, float:right и margin:0 auto;)
3-й час бьюсь, но никак не могу понять, что не так делаю. почему оранжевый блок опускается? &lt;!DOCTYPE html&gt; ...

float:left
у меня есть блок не фиксированной высоты с определенным фоном , внутри блоки с float:left (в них картинки) , и вот в чем проблема - если у...

Не работает float:left
Здравствуйте почему-то не работает float:right { border:0px solid #000; position:absolute; width:200px; float:right; ...

8
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  [ТС]
Ниже каждого изображения хочу вывести дату или количество комментариев
Миниатюры
float: left  
0
tribal dance
 Аватар для EPMAK
168 / 156 / 36
Регистрация: 03.09.2009
Сообщений: 820
Записей в блоге: 17
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>
Попробуй, может подойдет. Бордюрки для наглядности ставил.
1
 Аватар для epog333
2 / 2 / 1
Регистрация: 16.01.2011
Сообщений: 256
05.03.2013, 22:52  [ТС]
EPMAK, Спасибо большое, работает!
0
tribal dance
 Аватар для EPMAK
168 / 156 / 36
Регистрация: 03.09.2009
Сообщений: 820
Записей в блоге: 17
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>
0
 Аватар для epog333
2 / 2 / 1
Регистрация: 16.01.2011
Сообщений: 256
05.03.2013, 22:58  [ТС]
EPMAK, Я думаю этот не уместен будет, я вывожу изображения через цикл, а здесь только на статичной странице, так ведь?
0
tribal dance
 Аватар для EPMAK
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
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
05.03.2013, 23:08
Помогаю со студенческими работами здесь

Чем заменить float:left;
Есть очень простая конструкция. Нужно что бы два блока стояли рядом без использования float:left;. З.Ы Собственно чем не устроил флоат,...

Наследование высоты ul от li с float:left
Ситуация. Есть у нас родительский div, у которого не задана высота, с произвольным количеством div-потомков первого уровня с float:left. В...

Float и left - резиновая верстка
Не могу понять что не так. Объясните, пожалуйста, почему слой с выравниванием по правому краю съежает на следующую строку?! &lt;style...

Блоки по центру с float:left
Надо разместить блоки по центру, с ПРОЦЕНТНОЙ шириной, margin:20px, border:1px, wrapper::max-width:1200px;min-width:900px; (блок, в котором...

Выравнивание по центру блоков float:left
Есть один широкий блок а в нем несколько маленьких с обтеканием слева, и они по идее должны быть по центру все вместе &lt;div...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
9
Ответ Создать тему
Новые блоги и статьи
Отправка уведомления на почту при изменении наименования справочника
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
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru