С нами с 13.07.02
Сообщения: 3113
Рейтинг: 1817
|
 Добавлено: 17/11/07 в 18:31 |
Задача по верстке: как известно если указать много <img ...> подряд то картинки в браузере автоматически перенесуться на "новую строку" когда по горизонтали не хватит места, универсальный вариант для любых разрешений, теперь усложняем - под каждой картинкой нужно подпись сделать и получить тот же универсальный эффект, мне так кажется что это можно сделать div'ами, но в css с трудом очень ориентируюсь...
Например начинаем с такого:
| Код: |
<div style="display:inline;"><img width=300 height=200></div>
<div style="display:inline;"><img width=300 height=200></div>
<div style="display:inline;"><img width=300 height=200></div>
<div style="display:inline;"><img width=300 height=200></div>
|
все показывается как надо, но вставляем текст:
| Код: |
<div style="display:inline;"><img width=300 height=200><br>tratata</div>
<div style="display:inline;"><img width=300 height=200></div>
|
и все - развалилось...
|
|
|
|
| |
С нами с 18.01.06
Сообщения: 322
Рейтинг: 487
|
| Добавлено: 17/11/07 в 19:00 |
попробуй
| Код: |
<div>
<span style="display:inline;">some pix or text</span>......<span>bla-bla-bla</span>
</div>
|
|
|
|
|
| |
С нами с 29.10.03
Сообщения: 1217
Рейтинг: 1412
|
| Добавлено: 17/11/07 в 19:25 |
<table border="0" cellpadding="0" cellspacing="1" style="display:inline;"><tr align="center">
<td width="190" height="190"><a href="#url4_group1_category4#50" rel="nofollow"><img src="#pic4_group1_category4#" #s4_group1_category4# alt="#alt4_group1_category4#" width="190" height="135" border="1"></BR>#description4_group1_category4#</a></td>
</tr> </table>
как вариант без дивов.
|
|
|
|
| |
С нами с 03.05.04
Сообщения: 236
Рейтинг: 249
|
| Добавлено: 17/11/07 в 19:29 |
А вот так:
| Код: |
<html>
<head>
<style type="text/css">
<!--
div {
float : left;
text-align : center;
}
-->
</style>
</head>
<body>
<div style="display:inline;"><img width=300 height=200><br>tratata</div>
<div style="display:inline;"><img width=300 height=200><br>tratata</div>
<div style="display:inline;"><img width=300 height=200><br>tratata</div>
<div style="display:inline;"><img width=300 height=200><br>tratata</div>
<div style="display:inline;"><img width=300 height=200><br>tratata</div>
<div style="display:inline;"><img width=300 height=200><br>tratata</div>
<div style="display:inline;"><img width=300 height=200><br>tratata</div>
<div style="display:inline;"><img width=300 height=200><br>tratata</div>
</body>
</html>
|
|
|
|
|
| |
ищу работу (php,mysql,js)
С нами с 26.05.07
Сообщения: 576
Рейтинг: 393
|
| Добавлено: 17/11/07 в 20:08 |
| Код: | <div style='width:475px; text-align:center; margin:0px auto 0px auto; border:0px solid #C0C0C0'>
<span style='width:158px; margin:0px; float:left; border: 0px solid #C0C0C0'>
<a href='out1.php' target='_blank'><img width='150px' height='100px' style='border-color: #C0C0C0' src='images/tops/shy-mature-woman.jpg'></a>
<p class='ltext'><a href='out1.php' target='_blank' class='fre'><b>free porn #1</b></a></p>
<p class='ltext'><a href='out1.php' target='_blank' class='fre'><b>porn links #1</b></a></p>
</span>
<span style='width:158px; margin:0px; float:left; border: 0px solid #C0C0C0'>
<a href='out1.php' target='_blank'><img width='150px' height='100px' style='border-color: #C0C0C0' src='images/tops/hot-mature-slut.jpg'></a>
<p class='ltext'><a href='out1.php' target='_blank' class='fre'><b>free porn #2</b></a></p>
<p class='ltext'><a href='out1.php' target='_blank' class='fre'><b>porn links #2</b></a></p>
</span>
<span style='width:158px; margin:0px; float:left; border: 0px solid #C0C0C0'>
<a href='out1.php' target='_blank'><img width='150px' height='100px' style='border-color: #C0C0C0' src='images/tops/hottest-blonde-milf.jpg'></a>
<p class='ltext'><a href='out1.php' target='_blank' class='fre'><b>free porn #3</b></a></p>
<p class='ltext'><a href='out1.php' target='_blank' class='fre'><b>porn links #3</b></a></p>
</span>
</div> |
у меня работает таким образом. В даном примере выводит 3 тумбы и под каждой 2 текстовых ссылки. В Опере и ФФ не разлазится. Сделано по типу как написал proc3nt: один общий блок и в нем несколько вложеных.
|
|
|
|
| |
ищу работу (php,mysql,js)
С нами с 26.05.07
Сообщения: 576
Рейтинг: 393
|
| Добавлено: 17/11/07 в 20:20 |
| Код: | <div style='width:165px; height:250px; float:left; margin:0px'>
<a href='out.php' target='_blank'>
<img src='251_Gorgeous_blonde_nurse.jpg'>
</a>
<p class='ltext' style='text-align: center; padding: 5px 5px 15px 5px'>
<a href='out.php' target='_blank' class='fre' style='font-size:12px'><b>Gorgeous blonde nurse Kristal sucking cock of her patient</b>
</a>
</p>
</div> |
тут: тумба и под ней текстовая ссылка
|
|
|
|
| |
С нами с 13.07.02
Сообщения: 3113
Рейтинг: 1817
|
| Добавлено: 18/11/07 в 22:34 |
| teddy писал: | | как вариант без дивов. |
Так не работает, этот вариант не переносит на новую строчку когда место заканчивается.
kuindzi, Dim82 - спасибо, мне нужно было действительно свойство float, с ним все получилось.
|
|
|
|
| |
Текстовая реклама в форме ответа
Заголовок и до четырех строчек текста
Длина текста до 350 символов
Купить рекламу в этом месте! |
