webentwicklung-frage-antwort-db.com.de

Wie kann ich Text um ein Div rechts unten wickeln?

Jedes Mal, wenn ich versuche, etwas scheinbar einfaches in CSS zu machen, funktioniert es nicht.

Ich habe ein Content-Div, das ein 460x160-Bild enthält. Alles, was ich tun möchte, ist, das Bild in der rechten unteren Ecke zu platzieren und meinen Text darin einzuwickeln.

<div id="contents">
    <img src="..." />
    text text text text text text ...
</div>

Ich möchte, dass es so aussieht:

------------------
| text text text |
| text text text |
| text text -----|
| text text |    |
------------------

Wenn Sie es mit einem Bild oben links oder oben rechts machen, ist das Kuchen:

#contents img { float:right; }

------------------
| text text |    |
| text text -----|
| text text text |
| text text text |
------------------

Nun, wie drücke ich das nach unten? ... Die besten, die ich bisher gefunden habe, sind:

#contents img { float:right; margin-top: 90%} // really needs to be 100%-160px

------------------
| text text      |
| text text      |
| text text -----|
| text text |    |
------------------

In diesem Fall wird der Text nicht am Rand gedruckt, sodass sich oberhalb des Bildes ein weißer Bereich befindet.

#contents { position:relative; }
#contents img { position:absolute; right:0; bottom:0; }

-or-

// move the img tag under the text in the html and:
#contents img { float:right; margin-top:-160; }

------------------
| text text text |
| text text text |
| text text -----|
| text text | te |
------------------

In diesem Fall wird der Text über oder unter dem Bild gedruckt.

Also ... wie kann ich das erreichen?

55
CodingWithSpike

Es scheint sicher gestellt worden zu sein vor (2003) und vor (2002) oder vor (2005)

Der letzte Link schlägt tatsächlich eine Javascript-basierte Lösung vor, aber für eine feste (d. H. Nicht flüssige) Lösung.

Es ist jedoch konsistent mit andere Ratschläge gefunden

Die einzige Möglichkeit, dies zu tun, besteht darin, das schwebende Element irgendwo in der Mitte des Textes zu platzieren. Es ist unmöglich, es die ganze Zeit perfekt zu machen.

Oder dieses :

Es besteht darin, ein vertikales "Drücker" -Element (wie img, aber es ist wahrscheinlich klüger, nur ein leeres div zu verwenden) zu verschieben und dann das gewünschte Objekt mit der Eigenschaft clear darunter zu verschieben. Das Hauptproblem bei dieser Methode ist, dass Sie immer noch wissen müssen, wie viele Textzeilen vorhanden sind. Es macht die Sache jedoch VIEL einfacher und könnte definitiv mit Javascript codiert werden. Sie müssen nur die Höhe des "Drückers" in die Höhe des Containers abzüglich der Höhe des Schwimmers ändern (vorausgesetzt, Ihr Container ist nicht fest/min Höhe). .

Wie auch immer, wie diskutiert in diesem Thread , es gibt keine einfache Lösung ...


Cletus erwähnt in den Kommentaren dieses Thread von 20 , was noch einmal die Tatsache besagt, dass es nicht einfach zu erreichen ist.
Es bezieht sich jedoch auf diesen Eric Meyers Artikel , der dem Effekt nahe kommt, den Sie erzielen möchten.

Wenn Autoren verstehen, wie Floats und der normale Fluss miteinander in Beziehung stehen, und wie durch Löschen der normale Fluss um Floats manipuliert werden kann, können sie Floats als ein sehr leistungsfähiges Layout-Tool einsetzen.
Da Floats ursprünglich nicht für das Layout vorgesehen waren, sind möglicherweise einige Hacks erforderlich, damit sie sich wie beabsichtigt verhalten. Dies kann Floating-Elemente umfassen, die Floats enthalten, Clearing-Elemente oder eine Kombination aus beiden.


Dennoch schlägt Chadwick Meyer in seine Antwort eine Lösung vor, die auf dem :before CSS-Selektor basiert (Variation von Leonard 's Antwort ).
Es macht Arbeit hier .

29
VonC

Nun ... das ist ein ziemlich alter Beitrag, aber ich habe mich schwer getan und bin mit einem kleinen Workaround davongekommen. Ich musste ein Bild nach rechts ausrichten und genau 170px von oben. Und Text muss oben, links und unten im Bild fließen. Also, was ich getan habe, ist das Erstellen einer Breite von 0px mit einer Höhe von 170px und einem rechten Rand. Dann würde das img frei schweben und rechts und voila!

<!-- I used CSS, but inline will serve well here -->
<div style="float: right; width: 0px; height: 170px"></div>
<div style="float: right; clear: right"><img src="..." /></div>
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text

Funktionierte ziemlich gut :)

16

Die einfachste Lösung, die ich gefunden habe, ist, img in ein div-Element zu packen und dann die Werte für padding-top und margin-bottom zum Ausrichten zu verwenden.

Das ist mein CSS

.contentDiv  .bottomRight img{
  height: 130px;
  float:right;
  padding-top: 60px;
  margin-bottom: -10px;
  }

und hier ist das HTML

<div class="contentDiv">
 <h1>If you are seeing this and reading it, then all is working well.</h1>
 <div class="bottomRight">
    <img class="bottomRight" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==">
 </div>
</div>

Der Grund für das Auffüllen und die Marge für mich waren, dass ich es innerhalb des übergeordneten Elements "contentDiv" verwende, um die Höhe des div entsprechend dem Inhalt automatisch anzupassen. Nicht sicher, ob es von Nutzen ist.

1

Testen Sie für eine jQuery-Lösung das von gilly3 erstellte lowFloat-Plugin: https://github.com/gilly3/lowFloat

1
user6050419

Nach der veröffentlichten Lösung habe ich einen schnellen JQuery-Hack verwendet, um die Höhe des Drückers dynamisch anzupassen, indem ich die Höhe des Bereichs, den ich unten rechts ausrichten wollte, weg von der Höhe des Inhaltsbereichs ausrichtete Anwenden auf den Schieber div, wie folgt: 

$("#pusher").css("height", $("#content").height() - $("#contentToAlign").height() + 'px')

Es braucht ein paar kleine Verbesserungen, funktioniert aber im Allgemeinen so, wie Sie es bekommen werden!

0
Spikeh