Форум Сайтостроение Веб-строительство

Текст справа от картинки всегда, как сделать с помощью стилей?

P
На сайте с 06.01.2009
Offline
601
postavkin
1358

Здравствуйте. Подскажите, пожалуйста.

Сейчас сделано так, но нужно чтобы "текст2" не ставился под картинку...

Спасибо заранее

ps У меня только один вариант - ставить в таблицу...

Вот текущий код


<div class="list">

<div class="item"> 
<img src="photo/minmin/tov-bronzetto.jpg" width="150" alt="" title="" />
<ul>
<li><a href="http://www.site.ru/katalog/tov-bronzetto.php">bronzetto</a></li>
<li>размер 15*15, 30*30 (nat, lev); 15*120 (nat);</li>
<li>поверхность матовая</li>
<li>назначение - стены</li>
</ul>
</div>

<div class="clear"></div>
<div class="item"> 
<img src="photo/minmin/tov-azul-bahia.jpg" width="150" alt="" title="" />
<ul>
<li><a href="http://www.site.ru/katalog/tov-azul-bahia.php">azul bahia</a></li>
<li>размер 30*60, 60*60 (bocc, satin); 15*120 (nat, lev);</li>
<li>поверхность полированная</li>
<li>назначение - полы</li>
</ul>
</div>

</div>

jpg 115896.jpg
IL
На сайте с 20.04.2007
Offline
435
ivan-lev
#1

Добавить блок вокруг описания и задать ему overflow:hidden

* для IE может haslayout потребоваться.. zoom:1

<style>
.item img {float:left;overflow:hidden;zoom:1;display:block;}
.clear {clear:both;}
.desc {overflow:hidden;zoom:1;}
</style>

<div class="list">

<div class="item">
<img src="clients.png" width="180" alt="" title="" /><div class="desc">
<ul>
<li><a href="http://www.site.ru/katalog/tov-bronzetto.php">bronzetto</a></li>
<li>размер 15*15, 30*30 (nat, lev); 15*120 (nat);</li>
<li>поверхность матовая</li>
<li>назначение - стены</li>
</ul>
</div>
</div>

<div class="clear"></div>

... :) Облачные серверы от RegRu - промокод 3F85-3D10-806D-7224 ( http://levik.info/regru )
P
На сайте с 06.01.2009
Offline
601
postavkin
#2

ivan-lev, спасибо. То что Вы написали - лучше (и правильнее), чем строить таблицу? Я верно понимаю?


<div class="list">
<table border="1" width="100%" id="table1">
<tr>
<td width="150">
<img src="photo/minmin/tov-bronzetto.jpg" width="150" alt="" title="" />
</td>
<td>
<ul>
<li><a href="http://www.site.ru/katalog/tov-bronzetto.php">bronzetto</a></li>
<li>размер 15*15, 30*30 (nat, lev); 15*120 (nat);</li>
<li>поверхность матовая</li>
<li>назначение - стены</li>
</ul>
</td>
</tr>

<tr>
<td width="150">
<img src="photo/minmin/tov-azul-bahia.jpg" width="150" alt="" title="" />
</td>
<td>
<ul>
<li><a href="http://www.site.ru/katalog/tov-azul-bahia.php">azul bahia</a></li>
<li>размер 30*60, 60*60 (bocc, satin); 15*120 (nat, lev);</li>
<li>поверхность полированная</li>
<li>назначение - полы</li>
</ul>
</td>

</tr>
</table>
</div>

[Удален]
#3
postavkin:
строить таблицу

мдяяя ужжж

картинке задаём float:left

тексту - отступ слева на размер картинки + поля

и ничё под img залазить небудеть... ))

P
На сайте с 06.01.2009
Offline
601
postavkin
#4
Pavel_:
мдяяя ужжж

картинке задаём float:left
тексту - отступ слева на размер картинки + поля
и ничё под img залазить небудеть... ))

Размер картинки в ширину не фиксированный. Т.е. у одной картинки 150 пикс, у той что ниже может быть и 140 и 120.

Спасибо, Pavel_, но как быть тогда?

---------- Добавлено 06.11.2012 в 15:10 ----------

ivan-lev, спасибо. Работает.

Размер макета Редирект на зеркало в trust-host.ru - Account disabled
N
На сайте с 06.04.2011
Offline
53
nemartirosyan
#5
ivan-lev:
Добавить блок вокруг описания и задать ему overflow:hidden
* для IE может haslayout потребоваться.. zoom:1

спасибо за еще один вариант решения, а то я всегда высоту блоку с картинкой задавал...

Грамотная верстка. Изготовление сайтов на базе CMS Joomla. (/ru/forum/897104)
P
На сайте с 06.01.2009
Offline
601
postavkin
#6

Извините, потерто, мой косяк.

[Удален]
#7
postavkin:
но как быть тогда?

Задать картинке класс и установить константный размер

А ещё лучше - асилить какой-нить ресайзер... ))

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий