Плотно прилегающие друг к другу 9 картинок (3x3)

MoLoToK · February 14, 2009

Надо сделать плотно прилегающие друг к другу 9 картинок (3x3).

Вот я написал что-то: сделал общий слой с заданной шириной 300 (чтоб в ширину влазили лишь 3 картинки,), а уже в этот слой запихал подряд 9 слоёв с нужными мне картинками. В эти внутренние 9 слоёв (размерами 100x75) вложено по картинке таких же размеров: 100x75.

Не пойму, почему в IE между строками образуются промежности. Почитал статейки: добавил ко всему нулевые отступы (через универсальный селектор). не помогло.

А вообще, если Вам не сложно скажите: может я вообще не правильно подошёл к решению поставленной передо мной задачи? Может есть какой-то простецкий способ сделать всё это?

— CSS —

* {
margin: 0;
padding: 0;
}

#3v3 {
width: 300;
}

#imaga {
border: 0px;
float: left;
width: 100px;
height: 75px;
}

img {
width: 100;
height: 75;
border: 0;
}


— HTML —

<div id="3v3">

<div id="imaga">
<a href="#"><img src="image.gif"></a>
</div>

<div id="imaga">
<a href="#"><img src="image.gif"></a>
</div>

<div id="imaga">
<a href="#"><img src="image.gif"></a>
</div>

<div id="imaga">
<a href="#"><img src="image.gif"></a>
</div>

<div id="imaga">
<a href="#"><img src="image.gif"></a>
</div>

<div id="imaga">
<a href="#"><img src="image.gif"></a>
</div>

<div id="imaga">
<a href="#"><img src="image.gif"></a>
</div>

<div id="imaga">
<a href="#"><img src="image.gif"></a>
</div>

<div id="imaga">
<a href="#"><img src="image.gif"></a>
</div>

</div>

Edited February 14, 2009 by MoLoToK

skatadov · February 14, 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>

<title></title>

<meta name="description" content="" />
<meta name="keywords" content="" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

<style type="text/css">
*	{
	margin: 0;
	padding: 0;
	}

#d3	{
	width: 300px;
	}

#d3 img {
	border: none;
	float: left;
	height: 75px;
	width: 100px;
	}

</style>

</head>

<body>

<div id="d3">
<a href=""><img src="1.jpg" alt="" /></a>
<a href=""><img src="1.jpg" alt="" /></a>
<a href=""><img src="1.jpg" alt="" /></a>
<a href=""><img src="1.jpg" alt="" /></a>
<a href=""><img src="1.jpg" alt="" /></a>
<a href=""><img src="1.jpg" alt="" /></a>
<a href=""><img src="1.jpg" alt="" /></a>
<a href=""><img src="1.jpg" alt="" /></a>
<a href=""><img src="1.jpg" alt="" /></a>
</div>

</body>

</html>

MoLoToK · February 14, 2009

Я так и знал, что это делается так просто. Спасибо!

LunatiK · March 6, 2009

Я так и знал, что это делается так просто. Спасибо!

А проблема то была в том что img - строчный, а IE после него перевод строки считал за пробел

float:left, дал ему автоматически свойство display:block

ну, это так для понимания, а не тупого копирования

Sign In

Плотно прилегающие друг к другу 9 картинок (3x3)

Question

MoLoToK

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

skatadov

Link to comment

Share on other sites

MoLoToK

Link to comment

Share on other sites

LunatiK

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information