Bild immer in der oberen rechten Ecke der zweiten Spalte in 2 Mehrspalten div

8

Ich habe ein div mit column-count: 2 . Ich habe auch ein img drin.

Ich möchte dieses Bild immer in der oberen rechten Ecke der zweiten Spalte sehen .

Wie kann ich das erreichen? Ich weiß, dass ich position: absolute für die img verwenden kann, aber dann ist der Text nicht sichtbar (es ist unter dem Bild).

Ich dachte auch über padding-top der zweiten Spalte, aber von dem, was ich weiß, ist das nicht möglich.

Mein Code:

%Vor%

Erwartetes Verhalten:

    
suz 05.07.2016, 20:12
quelle

2 Antworten

7

Dies erreichen Sie mit einer Mischung aus flexbox und position :

  • setze position:relative auf deinen div Elternteil und gib den padding-top (wie image height )
  • Umschlinge dein img in einem Element, kann p identisch mit dem Text sein.
  • position:absolute mit top:0 und right:0 auf img setzen
  • Setze deine 1500 Wörter in ein einziges p
  • Entfernen Sie die zusätzliche padding-top , indem Sie margin-top: (- same value as padding-top) zu p hinzufügen, die den Text enthält.
  • setze display:flex auf den p welcher den Text hat.

Das letzte, das mit Firefox in Konflikt gerät, ist eine mögliche Lösung, um cross browser zu sein, eine Firefox-CSS-Eigenschaft anzuwenden, die display:flex mit dem Standard display:block

überschreibt

Funktioniert in Chrome, Firefox (in Edge als @lexith Erwähnt | in Safari als @mmgross erwähnt)

Hinweise:

  • Vermeiden Sie Inline-Stile
  • In img ist das Attribut src und nicht source .

%Vor% %Vor%
    
dippas 05.07.2016, 20:38
quelle
3
  

N. B. Die unten beschriebene Lösung funktioniert nur mit den aktuellen Versionen von Firefox, Safari und Edge.

Wenn Sie die Höhe des Bildes kennen, können Sie <div> a padding-top gleich (oder etwas größer) als diese Höhe geben.

Dann können Sie dem ersten Absatz in <div> einen negativen margin-top geben, gleich dem padding-top , den Sie gerade auf <div> angewendet haben.

Dies bedeutet, dass die erste Textspalte am Anfang von <div> beginnt und die zweite Textspalte direkt unter dem absolut positionierten <img> beginnt.

Beispiel:

%Vor% %Vor%
    
Rounin 05.07.2016 20:36
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Rail 3 - Flash-Nachrichten entkommen, der beste Weg zu unescape