Выравнивание картинок с помощью Float:left и float:right

Renert · August 16, 2007

Здравствуйте, есть код

<html>
<body>
<style type=text/css>
.box{
	border:1px solid red;
	height:50px;
	width:100%;
}
.box IMG {
	float:right;
	width:50px;
	height:50px;
	border:1px solid black;
}
</style>
<div class=box><img src="url"></div>
</body>
</html>

Почему картинка не вплотную прилегает к правому краю? или это из-за того что у меня IE 6.0 ?

Как обойти эту проблему, и как вообще выравнивать картинки по правому или левому краю?

Fu-tai · August 16, 2007

Хм, хороший вопрос! А зачем вам флоат для картинки, что ее должно обтекать?

И вообще почему именно картинке должен присваиваться стиль который ее будет выравнивать по какому либо краю?

Вы ведь чтобы выравнять текст в блоке задаете стиль text-align: leftright; для блока в котором текст, а не обращаетесь к самому тексту и говорите ему выравняться по какому либо краю!

Картинка кстати это впринципе тотже текст!

Внимание наводящий вопрос!!!

Как задать выравнивание картинки в блоке?

Не вплотную она не прилегает, потому что у нее не убраны бордеры и марджинги, а также потому что размеры блока больше самой картинки и заданы в %, в отличие от картинки в которой заданы в пикселях!

И главный вопрос нафига засовывать картинку в блок????

Renert · August 16, 2007

Не вплотную она не прилегает, потому что у нее не убраны бордеры и марджинги, а также потому что размеры блока больше самой картинки и заданы в %, в отличие от картинки в которой заданы в пикселях!

А вот и нет, специально для Вас - новый код, и тоже не работает.

<html>
<body>
<style type=text/css>
BODY {
 margin:0px;
 padding:0px;
}
.box{
 border:1px solid red;
 height:50px;
 width:500px;
}
.box IMG {
 float:right;
 border:0px;
 margin:0px;
 padding:0px;
 width:50px;
 height:50px;
}
</style>
<div class=box><img src="url"></div>
</body>
</html>

Хм, хороший вопрос! А зачем вам флоат для картинки, что ее должно обтекать?

Ну может, и не обтекать, вобщем, задача - сделать чтобы картинка прилипала вплотную к правому/левому краю блока.

И главный вопрос нафига засовывать картинку в блок????

Я так понимаю, это реторический вопрос. И на него будет реторический ответ - "чтобы было!"

Anderson · August 16, 2007

Renert, я нашел 2 способа:

1. Как сказал Fu-tai: в стиле блока пропишите text-align: right, а в img можете оставить float: right, чтобы и выравнивание было, и обтекание.

2. В тег пропишите hspace=0

zzz · August 16, 2007

Почему картинка не вплотную прилегает к правому краю? или это из-за того что у меня IE 6.0 ?
Как обойти эту проблему, и как вообще выравнивать картинки по правому или левому краю?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
 <title>Картинка</title>
 <style type=text/css>
 body {
 margin: 0;
 padding: 0;
 }
 div.box {
 width: 100%;
 height: 50px;
 }
 div.box div {
 border: 1px red solid;
 height: 52px;
 }
 div.box div img {
 border: 1px #000 solid;
 width: 50px;
 height: 50px;
 float: right;
 }
 </style>
</head>

<body>
 <div class="box">
 <div><img src="" alt="" /></div>
 </div>
</body>
</html>

Renert · August 17, 2007

ок. всем спасибо.

Sign In

Выравнивание картинок с помощью Float:left и float:right

Question

Renert

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

Fu-tai

Link to comment

Share on other sites

Renert

Link to comment

Share on other sites

Anderson

Link to comment

Share on other sites

zzz

Link to comment

Share on other sites

Renert

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information