Главная страница
Top.Mail.Ru    Яндекс.Метрика
Текущий архив: 2007.10.28;
Скачать: CL | DM;

Вниз

Вопрос по HTML   Найти похожие ветки 

 
SerJaNT ©   (2007-09-27 03:06) [0]

Нужно в одну строку вывести несколько вот таких блоков:

<img src="images/sss.gif" border="0" width="40" height="40" align="left"> строка номер раз<br>строка номер два

Если я тупо сделаю так:

<img src="images/sss.gif" border="0" width="40" height="40" align="left"> строка номер раз<br>строка номер два
<img src="images/sss.gif" border="0" width="40" height="40" align="left"> строка номер раз<br>строка номер два
<img src="images/sss.gif" border="0" width="40" height="40" align="left"> строка номер раз<br>строка номер два
и т.д.

то хер знает что получится... Рисунки и текст как-бы "ступеньками" выводятся, а хотелось бы чтобы нормально в одну строку, т.е. идет рисунок, напротив две строчки текста, рисунок, две строчки текста и т.д...

Как такое сделать?


 
Zeqfreed ©   (2007-09-27 05:25) [1]

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
   <title></title>
   <meta http-equiv="content-type" content="text/html;charset=utf-8" />
   <link rel="stylesheet" type="text/css" media="screen" href="/screen.css">
       <style>
               dl {
                       width: 220px;
               }

               dt {
                       display: block;
                       float: left;
                       clear: left;
               }

               dd {
                       display: block;
                       float: right;
                       clear: right;
                       width: 170px;
               }

               dt img {
                       border: 1px solid #ccc;
                       width: 40px;
                       height: 40px;
               }
       </style>
</head>
<body>
<dl>
<dt><img src="1.png"></dt>
<dd>раз два три<br/>три два раз<dd>
<dt><img src="2.png"></dt>
<dd>пять шесть семь<br/>десять десять десять</dd>
</dl>
</div>
</body>
</html>


Как-то так. Ну доработать самому нужно, а то я еще не проснулся.


 
homm ©   (2007-09-27 07:38) [2]

> [0] SerJaNT ©   (27.09.07 03:06)

Таблицы.


 
SerJaNT ©   (2007-09-28 02:36) [3]

> [1] Zeqfreed ©   (27.09.07 05:25)


Всё хорошо, но вот только надо чтобы это все было в одну строчку (пример - http://www.ii4.ru/images/749711sample.GIF).

Таблицы использовать нельзя по определенным причинам.


 
homm ©   (2007-09-28 05:06) [4]

> [3] SerJaNT ©   (28.09.07 02:36)
> Таблицы использовать нельзя по определенным причинам.

Раз эти причины определены, наверное они могут быть озвучены?


 
homm ©   (2007-09-28 05:11) [5]

Есть способ, но он заведомо кривее таблиц.

<style>
div {float:left;}
</style>
<div><img src="" border="1" width="40" height="40" align="left"> строка номер раз<br>строка номер два</div>
<div><img src="" border="1" width="40" height="40" align="left"> строка номер раз<br>строка номер два</div>
<div><img src="" border="1" width="40" height="40" align="left"> строка номер раз<br>строка номер два</div>


 
Бакук ©   (2007-09-28 07:52) [6]

> но он заведомо кривее таблиц

Ну почему он кривее? Блочная верстка&#133


 
homm ©   (2007-09-28 14:40) [7]

> [6] Бакук ©   (28.09.07 07:52)
> Ну почему он кривее?

Смотрим:
<style>
div {float:left;}
</style>
<div><img src="" border="1" width="40" height="40" align="left"> строка номер раз<br>строка номер два</div>
<div><img src="" border="1" width="40" height="40" align="left"> строка номер раз<br>строка номер два<br>строка номер два</div>
<div><img src="" border="1" width="40" height="40" align="left"> строка номер раз<br>строка номер два</div>
<div><img src="" border="1" width="40" height="40" align="left"> строка номер раз<br>строка номер два</div>
<div><img src="" border="1" width="40" height="40" align="left"> строка номер раз<br>строка номер два</div>
<div><img src="" border="1" width="40" height="40" align="left"> строка номер раз<br>строка номер два</div>


 
Альберт_   (2007-09-28 15:59) [8]

не проще ли img align=absmiddle и проблем-то...


 
SerJaNT ©   (2007-09-28 16:12) [9]

> [8] Альберт_   (28.09.07 15:59)


и что? а как несколько рисунков в одну строчку вывести?


 
SPeller ©   (2007-09-28 16:25) [10]

<style>
img.oneline { display: block; float: left; }
</style>
<body>
<img ... class="oneline" /><img ... class="oneline" /><img ... class="oneline" /><img ... class="oneline" /><img ... class="oneline" /><img ... class="oneline" />
<div style="clear:left"></div>


Делов-то :)


 
Альберт_   (2007-09-28 16:32) [11]

>и что? а как несколько рисунков в одну строчку вывести?

к каждому по атрибуту. и выглядит  вау



Страницы: 1 вся ветка

Текущий архив: 2007.10.28;
Скачать: CL | DM;

Наверх




Память: 0.5 MB
Время: 0.02 c
2-1191160170
Мурзик
2007-09-30 17:49
2007.10.28
Возможно ли?


3-1182371722
WFS
2007-06-21 00:35
2007.10.28
Сохранение базы данных.


15-1191392863
andreoman
2007-10-03 10:27
2007.10.28
как копировать временный файл из Opera


5-1162213823
любитель
2006-10-30 16:10
2007.10.28
подскажите как победить


15-1191497367
Crazybobr
2007-10-04 15:29
2007.10.28
Таможенный ставки для чайника. Просьба помочь.