it-swarm.com.de

Textumbruch um ein absolut positioniertes div

Ich weiß, es gibt ein paar Fragen zu ähnlichen Themen, aber meistens schweben die Div/Image. Ich muss das Bild (und das Div) absolut positioniert haben (nach rechts), aber ich möchte einfach, dass der Text dahinterfließt. Es funktioniert, wenn ich das Div schwebe, aber dann kann ich es nicht dort positionieren, wo ich will. Wie es ist, fließt der Text einfach hinter das Bild.

    <div class="post">
            <div class="picture">
  <a href="/user/1" title="View user profile."><img src="http://www.neatktp.com/sites/default/files/photos/BlankPortrait.jpg" alt="neatktp&#039;s picture" title="neatktp&#039;s picture"  /></a></div>
      <span class='print-link'></span><p>BlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlah.</p>
<p>BlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlah.</p>
        </div>

Ist ein Beispiel für das HTML

mit dem CSS:

    .picture img {
        background: #fff;
        border: 1px #ddd solid;
        padding: 2px;
        float: right;
}

.post .picture {
    display: block;
    height: auto;
    position: absolute;
    right: -10px;
    top: -10px;
    width: auto;
}

.post {
    border: 1px solid #FFF;
    border-bottom: 1px solid #e8ebec;
    padding: 37px 22px 11px;
    position: relative;
    z-index: 4;
}

Es ist ein Drupal-Thema, daher gehört keiner dieser Codes mir, es funktioniert nur, wenn es darum geht, ein Bild dort zu platzieren.

22
Paul Murphy

Durch die absolute Positionierung wird das Element aus dem normalen Dokumentenfluss entfernt, und es interagiert daher nicht mit den anderen Elementen. Vielleicht sollten Sie sich überlegen, wie Sie ihn mit Float positionieren, und diesbezüglich hier auf Stack Overflow nachfragen, wenn Sie nicht weiterkommen :)

5
akamike

Ich weiß, dass dies eine ältere Frage ist, aber ich bin darauf gestoßen und habe versucht zu tun, was ich glaube, dass Sie es versucht haben. Ich habe eine Lösung mit dem: before CSS Selector gemacht, also mit ie6-7 ist es nicht großartig, aber überall sollte man gut sein. 

Wenn ich mein Bild in ein div einfüge, kann ich vor der Hand einen langen Float-Block hinzufügen, um es niederzudrücken, und der Text wird fröhlich darum gewickelt!

img {
  float:right;  
  clear:both;
  width: 50% ;
  margin: 30px -50px 10px 10px ;
}
.rightimage:before {
  content: '' ;
  display:block;
  float: right;
  height: 200px;

}

Sie können es hier überprüfen:

http://codepen.io/atomworks/pen/algcz

19
Leonard

Wenn Sie ein Div absolut positionieren, nehmen Sie es effektiv aus dem Dokumentenfluss heraus, sodass die anderen Elemente so wirken, als ob sie nicht vorhanden wären.

Um dies zu umgehen, können Sie stattdessen Ränder verwenden:

.myDivparent
{
   float: left;
   background: #f00;
}

.myDivhascontent
{
   margin-left: 10px; /*right, bottom, top, whichever you need*/
}

Hoffentlich macht das den Trick :)

5
Kyle

Wie von @Kyle Sevenoaks erwähnt, nehmen Sie absolut positionierten Inhalt aus dem Dokumentenfluss heraus.

Soweit ich sehen kann, ist die einzige Möglichkeit, den übergeordneten div den absolut positionierten Inhalt zu umschließen, die Verwendung von Javascript, um die Breite und Höhe bei jeder Änderung festzulegen.

4
jeroen

Meiner Meinung nach ist die Eigenschaft "Absolut" schlecht benannt, da ihre Position tatsächlich relativ zu dem ersten übergeordneten Element ist, dessen Position nicht statisch ist

<div class="floated">
 <div style="position: relative;">
  <div class="AbsoluteContent">
    stuff
  </div>
 </div>
</div>
3
Matt

Ich denke, die beste Option ist, ein zusätzliches div nach dem Float-Inhalt hinzuzufügen, aber immer noch im übergeordneten Element, um vorherige Stile zu löschen.

<div class="clear"></div>

Und CSS:

.clear
{clear:both;}
3
Chris G

Ich brauchte eine ähnliche Lösung, um ein pullout quote (kein Bild) zu schweben, das einen variablen Text enthalten würde. Das Pullout-Zitat musste oben in den HTML-Code eingefügt werden (außerhalb des Textflusses) und in den Inhalt mit Text eingebettet werden, der den Text umgibt. Leonard's Antwort oben modifiziert, gibt es eine sehr einfache Möglichkeit, dies zu tun!

Siehe Codepen für Funktionsbeispiel: https://codepen.io/chadwickmeyer/pen/gqqqNE

CSS

/* This creates a space to insert the pullout content into the flow of the text that follows */
.pulloutContainer:before {
  content: '' ;
  display:block;
  float: right;
  /* The height is essentially a "margin-top" to Push the pullout Container down page */
  height: 200px;
}

.pulloutContainer q {
  float:left;  
  clear:both;
  /* This can be a set width or percent, if you want a pullout that floats left or right or full full width */
  width: 30%;
  /* Add padding as you see fit */
  padding: 50px 20px;
}

HTML

<div id="container">

  <div class="pulloutContainer">
      <!-- Pullout Container Automatically Adjusts Size -->
      <q>Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet.</q>
    </div>

    <div class="content">
       <h1>Sed Aucteor Neque</h1>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est.</

      ...INSERT MORE TEXT HERE...

  </div>
</div>
1
Chadwick Meyer

Es gibt eine einfache Lösung für dieses Problem. Es verwendet Leerraum: Nowrap;

<div class="position:relative">
 <div style="position: absolute;top: 100%; left:0;">
  <div style="white-space:nowrap; width: 100%;">
    stuff
  </div>
 </div>
</div>

Zum Beispiel habe ich ein Dropdown-Menü für eine Navigation erstellt, so dass ich das Setup verwendet habe 

<ul class="submenu" style="position:absolute; z-index:99;">
   <li style="width:100%; display:block;">
      <a href="#" style="display: block;width: 100%;white-space: nowrap;">Dropdown link here</a>
   </li>
<ul>

Image Beispiele

Ohne Nowrap aktiviert

Wenn Nowrap aktiviert ist

Wenn Sie es immer noch nicht herausfinden können, überprüfen Sie die Dropdown-Liste der Bootstrap-Vorlagen, die Sie googeln können. Dann erfahren Sie, wie sie funktionieren, weil sie die Position absolut verwenden und dafür sorgen, dass der Text eine Breite von 100% einnimmt, ohne den Text einzuwickeln.

0
user7479167

Hier ist ein Trick, der für einige funktionieren könnte:

wenn sich in einem Container viele Objekte befinden, und Sie möchten, dass das positionierte Objekt in bestimmten Fällen nach oben und in anderen Fällen nach unten (z. B. verschiedene Bildschirmgrößen) angezeigt wird, setzen Sie einfach mehrere Kopien des Objekts ein Ihre HTML-Datei ist entweder inline(-block) oder mit float und danndisplay:nonedie Elemente, die Sie nicht entsprechend den erforderlichen Bedingungen sehen möchten.

Hier ist ein JSFiddle, um genau zu zeigen, was ich meine: JSFiddle der richtigen Positionierung hoch und niedrig

Hinweis: Ich habe nur Farbe für den Effekt hinzugefügt. Abgesehen von den Klassennamen sind die divs "subject-1" und "subject-2" ansonsten genaue Kopien voneinander.

0
Damian Green

Bei der absoluten Positionierung können Sie den Text nicht umbrechen. Sie müssen Float und Position mit Rand oder Abstand verwenden.

0
iamtooamazing