CSS float

CTEKJlO · July 1, 2009

Всем доброй ночи.

Хотел что то похожее на это

тут текст				 тут картинка
тут текст побольше		тут картинка

текст выравнивается по левому краю а картинка поправому

<style type="text/css">
div {
		width:10%;
}
dl dd {
	float:left;
}
dl dt {
	float:right;
}
</style>
<div>
<dl>
	<dt>тут текст</dt><dd>тут картинка</dd>
	<dt>тут текст побольше</dt><dd>тут картинка</dd>
</dl>
</div>

И если div меньше ширины картинки и текста то картинка падает вниз. В этом и есть моя проблема.

Edited July 1, 2009 by CTEKJlO

psywalker · July 1, 2009

1) Ты пишешь правило для одного селектора и сразу переназначаешь зачем-то:

dl dd {

float:left;

}

dl dd {

float:right;

}

2) Ты задаёшь ширину в %, попробуй не задавать вообще

CTEKJlO · July 1, 2009

1)

это просто косяк

там dd и dt

2) Ты задаёшь ширину в %, попробуй не задавать вообще

если не задать то его другие элементы все равно сдвинут которые на странице.

может есть какое-то css параметр который как <nobr></nobr> в HTML действует только и для картинок и для текста

Edited July 1, 2009 by CTEKJlO

psywalker · July 1, 2009

поставь больше процентов тогда или вообще не ставь, а ещё промути min-width: ; что-бы флоат не соскакивал

CTEKJlO · July 1, 2009

процент побольше помогает но текст берется из базы и сегодня он такой завтра он другой

мне что-то типа этого надо

<table>
  <tr>
	<td>текст</td><td>картинка</td>
  </tr>
</table>

а вот на float что то у меня не получается. Я бы и таблицу оставил но там у меня вставка с помощью js и я хотел бы код сократить потому-что таких вставок до 500 нужно.

Edited July 1, 2009 by CTEKJlO

psywalker · July 1, 2009

дай ссылку поглядеть

CTEKJlO · July 1, 2009

дай ссылку поглядеть

выложить не куда

что именно скинуть я бы тут выложил

может единственный вариан с помощью js подсчитать кольчество символов во всех 500 вариантах выбрать где больше и умножить на ширину символа и потом через style это все задать а на картинке левый padding в 5px сделать

или тупо оставить таблицы

Edited July 1, 2009 by CTEKJlO

psywalker · July 1, 2009

Пойдёт?

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
 *{ margin: 0; padding: 0;}
  ul {}
	  ul li { overflow: hidden; border: 1px solid #000;}
		ul li img { float: right; }
		ul li p { overflow: hidden;}
</style>
</head>

<body>
	<ul>
		 <li><img src="file:///L|/SAIT'S/Alt-windows/img/house.jpg"><p>gdsffssgdgsdfgdfgdgdsffssgdgsdfgdfgdfgfggdgsgggdfgfdgdfg fgg dfg sfdghdfgsfghyfghfdg ddf fdfdfgfdgdfdfge gdf gdfgsdfg h hhgfh fghfghg hf gh fghhg hgdsffssgdgsdfgdfgdfgfggdgsgggdfgfdgdfg fgg dfg sfdghdfgsfghyfghfdg ddf fdfdfgfdgdfdfge gdf gdfgsdfg h hhgfh fghfghg hf gh fghhg hfgfggdgsgggdfgfdgdfg fgg dfg sfdghdfgsfghyfghfdg ddf fdfdfgfdgdfdfge gdf gdfgsdfg h hhgfh fghfghg hf gh fghhg</p> </li>
		 <li><img src="file:///L|/SAIT'S/Alt-windows/img/house.jpg"><p>gdsffssgdgsdfgdfgdgdsffssgdgsdfgdfgdfgfggdgsgggdfgfdgdfg fgg dfg sfdghdfgsfghyfghfdg ddf fdfdfgfdgdfdfge gdf gdfgsdfg h hhgfh fghfghg hf gh fghhg hgdsffssgdgsdfgdfgdfgfggdgsgggdfgfdgdfg fgg dfg sfdghdfgsfghyfghfdg ddf fdfdfgfdgdfdfge gdf gdfgsdfg h hhgfh fghfghg hf gh fghhg hfgfggdgsgggdfgfdgdfg fgg dfg sfdghdfgsfghyfghfdg ddf fdfdfgfdgdfdfge gdf gdfgsdfg h hhgfh fghfghg hf gh fghhg</p> </li>
</ul>


</body>
</html>

CTEKJlO · July 1, 2009

Спасибо это как раз 100% попадание в точку.

Код работает круто но есть вопрос почему текст который обтекает картинку overflow: hidden; это какой-то трюк?

Как я понимаю overflow: hidden; это спрятать часть контента если контент больше чем та область куда он вставлен.

psywalker · July 2, 2009

overflow: hidden; просто обрубает абзац и не пускает его за правые края в твоём случае, а ещё это привило служит для того, что-бы охватить обтикаемые элементы, и спасает от схлопывания, если ты понимаешь о чём я!

Sign In

CSS float

Question

CTEKJlO

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

CTEKJlO

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

CTEKJlO

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

CTEKJlO

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

CTEKJlO

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information