див проблем

[mo7ika]

имам див в който имам текст и флоатната картинка в ляво. обаче височината на дива ми не се води от височината на картинката а от височината на текста. как да направя така че да се води от височината на снимката?

 

[tedo96]

Сложи на картинката display: block;

 

[Ev0luti0N]

Сложи текста в друг див и му задай:
[css]clear: both;[/css]
:idea:

П.П. Но на @tedo96 вариянта е май по-добър! :?:

 

[odyssey]

Здравейте! Аз имам подобен проблем. Имам един див с бордер и в него има картинка, а от дясната и страна има текст. На картинката съм задал align="left" за да може текста да започва заедно с нейното начало. И ако текста е по малък от картинката див-а с бордер-а се ръководи от текста. Слагах display: block, но не помага. А като сложих clear: both на текста ми го изкара под картинката, а не до нея. По принцип за да не се получава този проблем аз съм изнамерил два метода: единия (дървено е) слагам празни нови редове в текста докъдето е нужно; другия - правя си таблица в този див и слагам картинката в една колона, а текста в друга.

 

[Karcho]

Не се слага на текста.

Пример:

<div>
<img ... float left/>
text, text, text

<div style="clear: both;"> </div>
</div>

 

[bytheway]

Моето решение е същото като на Karcho:

Това, е което използвам като HTML.

<div id="test">
<img src="test.jpg" alt="Test" />
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, 
</p>
<div id="clear"></div>
</div>

Имам div и в него има снимка (img) и параграф (p).
Под тях има друг div, който всъщност се използва единствено, за да не позволява на други елементи да се float-ват от двете страни. По този начин div-а застава винаги под най-високия елемент, съответно параграфа или снимката.

Това е CSS-a:

[css]
#test {
border: 1px solid #000;
}
#test img {
float: left;
height: 300px;
display: inline;
padding: 10px;
}
#clear {
clear: both;
}
[/css]

 

[hpstuff]

Другия вариант е на дива да му зададеш
[css]overflow: hidden;[/css]