So verhindern Sie die Überlappung von Text im unteren ausgerichteten DIV-Element

Wenn ich versuche, Text in einem DIV-Element auszurichten, stehe ich vor dem Problem, dass wenn der obige Text lang genug ist, um das Ende des DIV-Elements zu erreichen Überschneidet sich mit dem unten ausgerichteten Text. Hier ist der Code: http://jsfiddle.net/Kw758/So verhindern Sie die Überlappung von Text im unteren ausgerichteten DIV-Element

<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>

Wie kann ich die Überlappung des Textes in SPAN Element und dem Text in DIV-Element verhindern?

Der Grund, warum ich es mit dem Attribut 'position' am unteren Ende ausrichtet, anstatt nur das Datum auf 'float: right' zu setzen, liegt daran, dass der DIV in meinem tatsächlichen Problem eine Mindesthöhe haben soll Der untere Rand des DIV-Elements könnte sehr weit von dem Text im SPAN-Element entfernt sein.

Quelle

2012-03-24 Lone Learner

sieht ähnlich wie diese: http://stackoverflow.com/questions/499829/css-wrap-text-around-a-bottom-right-div – dldnh

Es ist, aber in Ihrem Beispiel den Text ist erforderlich, um das unten positionierte Element gewickelt zu werden. Dies ist hier nicht der Fall und scheint daher viel einfacher zu sein. –

Wäre es nicht genug, einen Füllboden auf #container zu setzen?

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

Quelle

2012-03-24 22:35:21

So verhindern Sie die Überlappung von Text im unteren ausgerichteten DIV-Element

Antwort

Verwandte Themen