Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.83/6: Рейтинг темы: голосов - 6, средняя оценка - 4.83
2 / 2 / 1
Регистрация: 16.01.2011
Сообщений: 256
1

float: left

05.03.2013, 22:31. Показов 1120. Ответов 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
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
05.03.2013, 22:31
Ответы с готовыми решениями:

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

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

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

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

8
15 / 15 / 0
Регистрация: 22.10.2012
Сообщений: 336
05.03.2013, 22:36 2
Ты тиражирование изображений сделал?

Можно поинтересоваться, для чего тебе это?
0
2 / 2 / 1
Регистрация: 16.01.2011
Сообщений: 256
05.03.2013, 22:39  [ТС] 3
Ниже каждого изображения хочу вывести дату или количество комментариев
Миниатюры
float: left  
0
tribal dance
167 / 155 / 36
Регистрация: 03.09.2009
Сообщений: 820
Записей в блоге: 17
05.03.2013, 22:49 4
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
2 / 2 / 1
Регистрация: 16.01.2011
Сообщений: 256
05.03.2013, 22:52  [ТС] 5
EPMAK, Спасибо большое, работает!
0
tribal dance
167 / 155 / 36
Регистрация: 03.09.2009
Сообщений: 820
Записей в блоге: 17
05.03.2013, 22:56 6
На всякий случай, ещё вариант решения.

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
2 / 2 / 1
Регистрация: 16.01.2011
Сообщений: 256
05.03.2013, 22:58  [ТС] 7
EPMAK, Я думаю этот не уместен будет, я вывожу изображения через цикл, а здесь только на статичной странице, так ведь?
0
tribal dance
167 / 155 / 36
Регистрация: 03.09.2009
Сообщений: 820
Записей в блоге: 17
05.03.2013, 23:06 8
Это пример , для наглядности, что теги A, который будут созданы в цикле, встанут так как и на твоем скрине выше.
Стили должны подойти.

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

#img <-- должен быть только один на странице.
.img <-- любое количество на странице.
Это важно для обработки тегов каким нибудь яваскрипт сценарием.
0
2 / 2 / 1
Регистрация: 16.01.2011
Сообщений: 256
05.03.2013, 23:08  [ТС] 9
EPMAK, Я с первым вариантом уже разобрался, всё прекрасно работает, ещё раз спасибо)
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
05.03.2013, 23:08

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

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

Блоки по центру с float:left
Надо разместить блоки по центру, с ПРОЦЕНТНОЙ шириной, margin:20px, border:1px,...

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

margin-left и float с min-width
Вот такая проблема. Вот код: &lt;div style=&quot;float: left; width: 20%; min-width: 100px; max-width:...

float:left и блоки с закруглёнными углами
Проблема в следующем:когда я размещаю 2 diva с закруглёнными углами рядом друг с другом,и указываю...


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

Или воспользуйтесь поиском по форуму:
9
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2022, CyberForum.ru