Ширина ячейки со скрытыми элементами

lazybaby · February 17, 2010

Есть TD, в которой присутствует картинка, ширина которой в общем случае неизвестна, и текст. Картинка скрыта (display:none). Ширина ячейки задана, и она меньше ширины скрытой картинки. При этом ячейка отображается по заданной ширине, т.е. ширина скрытой картинки игнорируется. Если картинку сделать видимой (display:block), то ширина ячейки становится равной ширине картинки, что и требуется!

Собственно задача - необходимо сделать ширину ячейки со скрытой картинкой (неизвестной ширины) равной ширине этой картинки. А в общем случае - ширине любого скрытого контента в состоянии, когда он не скрыт. При этом контент внутри может быть самый разный, т.е. (если что) неизвестно у какого скрытого элемента выяснять его ширину :lol:

Для конкретики минимальный код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<head>

</head>

<body>

Some text

</div>

<img src="img.jpg">

</div>

</td><td></td></tr></table>

</body>

</html>

Идеи?

Edited February 17, 2010 by lazybaby

psywalker · February 17, 2010

Есть TD, в которой присутствует картинка, ширина которой в общем случае неизвестна, и текст. Картинка скрыта (display:none). Ширина ячейки задана, и она меньше ширины скрытой картинки. При этом ячейка отображается по заданной ширине, т.е. ширина скрытой картинки игнорируется. Если картинку сделать видимой (display:block), то ширина ячейки становится равной ширине картинки, что и требуется!
Собственно задача - необходимо сделать ширину ячейки со скрытой картинкой (неизвестной ширины) равной ширине этой картинки. А в общем случае - ширине любого скрытого контента в состоянии, когда он не скрыт. При этом контент внутри может быть самый разный, т.е. (если что) неизвестно у какого скрытого элемента выяснять его ширину
Для конкретики минимальный код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<table width="100%" border="1"><tr><td width="50px"> 
<div id="header">
Some text
</div>
<div id="content">
<div style="display:block">
<img src="img.jpg"> 
</div>
</td><td></td></tr></table>
</body>
</html>
Идеи?

Я полагаю, что JS например может вычеслить ширину и высоту определённой картинки и в зависимости от её ширины уже прописать нужную ячейкам

s0rr0w · February 17, 2010

Есть TD, в которой присутствует картинка, ширина которой в общем случае неизвестна, и текст. Картинка скрыта (display:none). Ширина ячейки задана, и она меньше ширины скрытой картинки. При этом ячейка отображается по заданной ширине, т.е. ширина скрытой картинки игнорируется. Если картинку сделать видимой (display:block), то ширина ячейки становится равной ширине картинки, что и требуется!
Собственно задача - необходимо сделать ширину ячейки со скрытой картинкой (неизвестной ширины) равной ширине этой картинки. А в общем случае - ширине любого скрытого контента в состоянии, когда он не скрыт. При этом контент внутри может быть самый разный, т.е. (если что) неизвестно у какого скрытого элемента выяснять его ширину

Ширина и высота скрытой картинки = 0.

psywalker · February 17, 2010

Ширина и высота скрытой картинки = 0.

Да, но её же всё равно при этом можно вычеслить, она же находится в структуре, хоть её и не видно?

psywalker · February 17, 2010

Например вот так вот:

<!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="en" lang="en">

<head>
<title>Фильтр</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<style type="text/css">
	*{ margin: 0; padding: 0;}
	img { display: none;}

	table { border-collapse: collapse; border: 1px solid #000;}
	td { border: 1px solid red;}
	td.c img { display: block;}
</style>



</head>

<body>

	<table>
		<tr>
			<td id="one">
				<img src="img1.png" alt="s0rr0w" width="150" height="200" />
			</td>
			<td>
				<img src="img1.png" alt="s0rr0w" width="150" height="200" />
			</td>
			<td class="c">
				<img src="img1.png" alt="s0rr0w" width="90" height="90" />
			</td>
		</tr>
		<tr>
			<td>
				<img src="img1.png" alt="s0rr0w" width="150" height="200" />
			</td>
			<td class="c">
				<img src="img1.png" alt="s0rr0w" width="90" height="90" />
			</td>
			<td>
				<img src="img1.png" alt="s0rr0w" width="150" height="200" />
			</td>
		</tr>
	</table>
<script type="text/javascript">

	var table = document.getElementsByTagName('table').item(0)
	var img1 = document.getElementsByTagName('img').item(0)
	var td = document.getElementById('one')
	var w = img1.width
	var h = img1.width
	td.style.width = w+'px'
	td.style.height = h+'px'


</script>	
</body>

s0rr0w · February 17, 2010

Да, но её же всё равно при этом можно вычеслить, она же находится в структуре, хоть её и не видно?

Да, можно. Получишь по нулям везде.

psywalker · February 18, 2010

Да, можно. Получишь по нулям везде.

Согласен, но я же вычеслил немного по другому, по атрибуту width: у картинки

s0rr0w · February 18, 2010

Согласен, но я же вычеслил немного по другому, по атрибуту width: у картинки

А если их нет?

psywalker · February 18, 2010

А если их нет?

А тогда какой же выход?

s0rr0w · February 18, 2010

А тогда какой же выход?

Показывать картинку за пределами экрана.

psywalker · February 18, 2010

Показывать картинку за пределами экрана.

В смысле?

s0rr0w · February 18, 2010

В смысле?

В прямом.

psywalker · February 18, 2010

В прямом.

Нее, извини, я просто не понял. За пределами экрана? Это значит в других фреймах? Я просто в этом не разбираюсь ничерта

Justnewone · February 18, 2010

Нее, извини, я просто не понял. За пределами экрана? Это значит в других фреймах? Я просто в этом не разбираюсь ничерта

Я могу ошибаться, но такое ощущение, что речь о том, что можно картинку абсолютно отпозиционировать влево и вверх далеко за пределы экрана (например top:-5000px) без появления скролла. На :hover например обратно возвращать. Так часто делают эдакий преаплоад картинок "туз из рукава".

s0rr0w · February 18, 2010

Я могу ошибаться, но такое ощущение, что речь о том, что можно картинку абсолютно отпозиционировать влево и вверх далеко за пределы экрана (например top:-5000px) без появления скролла. На :hover например обратно возвращать. Так часто делают эдакий преаплоад картинок "туз из рукава".

Именно

psywalker · February 18, 2010

Т.е. вы хотите сказать, что если картинку убрать таким образом, то её размеры можно вычеслить? А чем, каким методом?

s0rr0w · February 18, 2010

Т.е. вы хотите сказать, что если картинку убрать таким образом, то её размеры можно вычеслить? А чем, каким методом?

offsetWidth, offsetHeight

Sign In

Ширина ячейки со скрытыми элементами

Question

Link to comment

Share on other sites

16 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information