Форум Сайтостроение Веб-строительство

Автоматическая высота DIVа =\

IM
На сайте с 29.10.2010
Offline
114
IndigoMan
1455

Проблема такая, есть DIV, в нем картинка и текст, если написать текст, то див по высоте следует за ним, но если вставить изображение, то оно вылазит за край, как сделать так чтобы ДИВ был динамичным по высоте в зависимости от размера картинки?

Для наглядности я залил див синим фоном, хочу чтобы было так как на нижней =):


.news {
padding: 5px;
background: #003;
}
.news img {
padding: 0 5px 5px 0;	
}

        	<div class="news">
				<img src="images/news/1.jpg" width="60" height="43" align="left" />
   				<h1><a href="#">Дэниел Рэдклифф меняет профессию</a></h1>
            </div>

ps я понимаю что можно жестко указать высоту дива, мне нужно чтобы она была динамичной

furnaslives
На сайте с 11.01.2010
Offline
48
furnaslives
#1

.news {

padding: 5px;

background: #003;

overflow: hidden;

}

Разработка приложений для android. Мои приложения и игры (https://play.google.com/store/apps/developer?id=Evgeniy) на play.google.com
Ragnarok
На сайте с 25.06.2010
Offline
239
Ragnarok
#2

height:100%;

попробуй

//TODO: перестать откладывать на потом
DZ
На сайте с 03.02.2011
Offline
2
DoctorZlo
#3

Попробуй применить такой код. 

<html>

<head>

<style>

.clearfix:after {

    content: ".";

    display: block;

    clear: both;

    visibility: hidden;

    line-height: 0;

    height: 0;

}

</style>

</head>

<body>

	<div class="clearfix" style="padding: 5px;">

		<img align="left" src="..." style="padding: 0pt 5px 5px 0pt;">

		<div>ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ </div>

	</div>

	<p>текст после</p>

</body>

</html>

DoctorZlo добавил 17.02.2011 в 09:02

Вообще ноги у проблемы растут из align="left". На языке CSS это означает float: left;

из-за чего картинка как бы выпадает из своего контейнера.

Выравнивание изображение по центру Не работает сайт только Отступ текста от картинки
ParserYa
На сайте с 04.10.2010
Offline
29
ParserYa
#4

Поставьте картинке свойство display:block; Под картинкой, что бы наверняка можете добавить блок <div style="clear:both"></div> - это будет как бы черта невидимая..

DZ
На сайте с 03.02.2011
Offline
2
DoctorZlo
#5

Если вводить лишний DIV, то не под картинкой, а после H1. Иначе H1 расположится ниже картинки.

Либо использовать аналогичное средство CSS ("невидимая линия"), описанное выше.

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий