Jak zapobiec nakładaniu się tekstu na wyrównany do dołu element DIV?

Kiedy próbuję dopasować dolny tekst w elemencie DIV, stoję w obliczu problemu, że gdy powyższy tekst jest wystarczająco długi, aby dotrzeć do spodu elementu DIV, to pokrywa się z tekstem dopasowanym do dołu. Oto kod: http://jsfiddle.net/Kw758/Jak zapobiec nakładaniu się tekstu na wyrównany do dołu element DIV?

<html> 
<head> 
<title>Date</title> 
<style type="text/css"> 
#container { 
    position: relative; 
    border: 1px solid gray; 
    width: 200px; 
} 

#date { 
    margin-top: 1em; 
    position: absolute; 
    bottom: 5px; 
    right: 5px; 
} 
</style> 
</head> 
<body> 
<div id="container"> 
    <span> 
    This is a very very long text that might overlap with the date 
    just below this. 
    </span> 
    <div id="date"> 
    January 1, 2012 
    </div> 
</div> 
</body> 
</html>

Jak mogę zapobiec nakładaniu się tekst w elemencie SPAN i tekstu w elemencie DIV?

Powodem, dla którego dopasowuję dolną wartość atrybutu "position", a nie tylko ustawienie daty na "float: right", jest fakt, że w moim rzeczywistym problemie DIV powinien mieć ustawiony min-height, więc dolna krawędź elementu DIV może być bardzo oddalona od tekstu w elemencie SPAN.

Źródło

2012-03-24 Lone Learner

wygląda podobnie do tego: http://stackoverflow.com/questions/499829/css-wrap-text-around-a-bottom-right-div – dldnh

to jest, ale na swoim przykładzie, tekst jest wymagane, aby owinąć się wokół dolnego elementu pozycjonowanego. Tak nie jest w tym przypadku i dlatego wydaje się znacznie prostsze. –

Czy nie wystarczy ustawić padding-bottom na #container?

#container { 
    position: relative; 
    border: 1px solid gray; 
    width: 200px; 
    padding-bottom: 30px; /* depending on font-size of span */ 
}

Źródło

2012-03-24 22:35:21

Jak zapobiec nakładaniu się tekstu na wyrównany do dołu element DIV?

Odpowiedz

Powiązane problemy