Как заставить выводится картинку строго в своем блоке?

Dachiko · July 15, 2009

В css я новичек, и сейчас читаю доки, но пока не могу найти чего-то явно по моей задаче:

Как видите, картинка наезжает на все прочие слои. Можно конечно вставить ее в ячейку таблицы, но самое ли это прямое решение? Как-то можно заставить картинку оставаться строго в своем блоке с помощью css? Если возможно, то что бы это не зависело от размера вставляемой картинки.

s0rr0w · July 15, 2009

В css я новичек, и сейчас читаю доки, но пока не могу найти чего-то явно по моей задаче:
Как видите, картинка наезжает на все прочие слои. Можно конечно вставить ее в ячейку таблицы, но самое ли это прямое решение? Как-то можно заставить картинку оставаться строго в своем блоке с помощью css? Если возможно, то что бы это не зависело от размера вставляемой картинки.

И как вам помочь?

Searcher · July 16, 2009

код то покажите, откуда мы знаем, какими свойствами вы там оперируете...

Как вариант, причиной выпадания объектов за рамки их родителей может быть свойство float, тогда для родителей нужно либо устанавливать четкий размер, либо устанавливать overflow:hidden. А если вы используете абсолютное позиционирование, тогда для родителй только указание размеров поможет.

Dachiko · July 16, 2009

Прошу прощения, что не выложил исходник сразу, думал есть какое-то упущенное мной простое решение. Спасибо за терпение и помощь

Поудалял всех соседей, оставил только искомый блок.

хтмл:

<div id="mainBlock">
	<div id="mainNewsBlock">
		<div class="newsBody">
			Тут текст, куда и вставлена выезжающая за пределы блока картинка
		</div>
	</div>
</div>

И вот css

body 
	{
		background: #AABBFF;
		margin: 10px 50px 10px 50px;
		font-family: sans-serif;
	}

#mainBlock
	{
		margin: 0px 40px 10px 40px;
		padding: 10px;
		background: #6688DD;
	}

#mainNewsBlock
	{

		background-color: white;
		margin: 15px 25px 5px 25px;
		padding: 5px;
	}

.newsBody
	{
		background-color: white;
		color: black;
		text-align: left;
		font-size: 1em;
		padding: 5px 20px 5px 20px;
		margin: 0px 35px 0px 35px;
		font-family: arial;
	}

Justnewone · July 16, 2009

не тот фрагмент

Searcher · July 16, 2009

да, в этом фрагменте не вижу проблем... может для картинки какие-то свойства еще заданы?

Dachiko · July 19, 2009

Прошу прощения за медленные ответы.

Отойдем от приведенного примера. Вот "чистый" пример, как получается, если я делаю предельно "тупо":

Хтмл:

<div class="block">
	<span class="img">
		<img src="img/small.jpg" height="150"/>
	</span>
	<span class="text">
		Немного текста
	</span>
</div>

Ксс:

.block
	{	background-color: grey;
		margin: 10px;
		padding: 10px;}

.img
	{	background-color: blue;
		margin: 10px;}

.text
	{background-color: white;}

Видно, что картинка вылазит из своего блока, т.е. он не растягивается. Высота картинки задана в 150px просто для примера, на самом деле я не знаю, какой высоты будет картинка. Если это делать с помощью float, то картинка выпадывает на нижние слои.

Cabalist · July 20, 2009

В вашем члучае код будет выглядеть вот так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* { margin: 0px; padding: 0px; border: 0px; }
html,body {
	height: 100%;
	width: 100%;
}
.block {
	background: gray;
	margin: 0px 10px;
	padding: 10px;
	overflow: hidden;
	position: relative;
	top: 10px;
	_zoom: 1;
}
.img {
	background-color: blue;
	float: left;
}
.img img {
	display: block;
}
.text {
	background-color: white;
	position: absolute;
	bottom: 10px;
	left: 180px;
}
</style>
</head>

<body>
<div class="block">
	<span class="img">
		<img src="juk.jpg" height="150" width="150" alt="juk"/>
	</span>
	<span class="text">
		Немного текста
	</span>
</div>
</body>
</html>

Sign In

Как заставить выводится картинку строго в своем блоке?

Question

Dachiko

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

s0rr0w

Link to comment

Share on other sites

Searcher

Link to comment

Share on other sites

Dachiko

Link to comment

Share on other sites

Justnewone

Link to comment

Share on other sites

Searcher

Link to comment

Share on other sites

Dachiko

Link to comment

Share on other sites

Cabalist

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information