Textumbruch um ein absolut positioniertes div

Ich weiß, es gibt ein paar Fragen, die über ähnliche Themen, aber meistens eine Menge zu floaten der div/Bild. Brauche ich, um das Bild(und div) absolut positioniert (rechts ab), aber ich möchte einfach den Textfluss um ihn herum. Es funktioniert, wenn ich float-div dann kann ich aber nicht positionieren, wo ich will. Als es ist der text fließt 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 des HTML -

mit 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-theme, so dass keiner dieser code ist von mir, es ist nur so, dass es nicht vollständig funktioniert, wenn es darum geht, ein Bild gibt es.

InformationsquelleAutor der Frage Paul Murphy | 2009-12-16

5

Absolute Positionierung nimmt das element aus dem normalen Belegfluss, und daher ist es interagiert nicht mit den anderen Elementen. Vielleicht sollten Sie revist wie positionieren mit float statt, und zu Fragen, was es hier auf Stack-Überlauf, wenn Sie nicht weiterkommen 🙂

InformationsquelleAutor der Antwort akamike
13

Ich weiß, dies ist eine ältere Frage, aber ich stieß es auf der Suche zu tun, was ich glaube, was Sie wollten. Ich habe eine Lösung mit der :vor der CSS-Selektor, so ist es nicht gut mit ie6-7, aber ansonsten sollten Sie gut sein.

Grundsätzlich, mit meinem Bild in einem div, kann ich mich dann fügen Sie eine lange Sache-float-block vor der hand, zu stoßen, ihn hin und der text wird automatisch umbrochen, die fröhlich um ihn herum!
```
img {
  float:right;  
  clear:both;
  width: 50% ;
  margin: 30px -50px 10px 10px ;
}
.rightimage:before {
  content: '' ;
  display:block;
  float: right;
  height: 200px;

}
```
Können Sie check it out hier:

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

InformationsquelleAutor der Antwort Leonard
5

Wenn Sie die position eines div-absolut, du bist effektiv der Einnahme aus dem document flow, also die anderen Elemente werden so handeln, als ob es gar nicht da.

Um dies zu umgehen, können Sie stattdessen verwenden Margen:
```
.myDivparent
{
   float: left;
   background: #f00;
}

.myDivhascontent
{
   margin-left: 10px; /*right, bottom, top, whichever you need*/
}
```
Hoffentlich wird den trick tun 🙂

InformationsquelleAutor der Antwort Kyle
4

Wie erwähnt von @Kyle Sevenoaks, Sie nehmen absolut positionierten Inhalt aus dem Dokument fließen.

Soweit ich sehen kann, ist der einzige Weg, um die Eltern div wickeln Sie die absolut positionierten Inhalt, ist die Verwendung von javascript festlegen der Breite und Höhe auf jede änderung.

InformationsquelleAutor der Antwort jeroen
3

In meinem opinon, die "Absolute" - Merkmal ist schlecht genannt, weil seine position ist eigentlich relativ zu den ersten Eltern, deren position ist nicht statisch
```
<div class="floated">
 <div style="position: relative;">
  <div class="AbsoluteContent">
    stuff
  </div>
 </div>
</div>
```
InformationsquelleAutor der Antwort Matt
2

Ich denke, die beste option ist, um eine zusätzliche div-nach dem float-Inhalten, aber noch immer innerhalb der übergeordneten zu löschen Vorherige Stile.
```
<div class="clear"></div>
```
Und CSS:
```
.clear
{clear:both;}
```
InformationsquelleAutor der Antwort Chris G
0

Absolute Positionierung nicht lassen Sie text umbrechen. Sie haben die Verwendung von float und position mit margin oder padding.

InformationsquelleAutor der Antwort iamtooamazing
0

Hier ist ein trick, der vielleicht funktioniert, für einige:

wenn Sie ein container, gepackt mit eine Menge von Objekten, und Sie möchten, dass positionierten Objekt zu erscheinen, die bis hoch in bestimmten Fällen, und geringere in anderen Fällen (verschiedene Bildschirmgrößen, zum Beispiel), dann nur einstreuen, Kopien von dem Objekt mehrere Male in den html-Code, entweder inline(-block) oder mit floatund dann display:none die Elemente, die Sie nicht wollen, um zu sehen, nach den Bedingungen, die Sie benötigen.

Hier ein JSFiddle, um genau zu zeigen was ich meine: JSFiddle der richtigen Positionierung high-und low -

Hinweis: ich fügte Farbe nur für die Wirkung. Mit Ausnahme der Klasse Namen, die Subjekt-1 und 2 divs sonst sind genaue Kopien voneinander.

InformationsquelleAutor der Antwort Damian Green
0

Gibt es eine einfache Lösung für dieses problem. Es ist mit white-space: 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 ich war dabei, ein dropdown-Menü für die navigation, damit das setup ich war mit ist
```
<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>
```
Bild Beispiele

Ohne Nowrap aktiviert

Mit Nowrap aktiviert

Auch wenn Sie immer noch nicht herausfinden, schauen Sie sich die dropdowns auf bootstrap-Vorlagen, die Sie können google. Dann finden Sie heraus, wie Sie funktionieren, weil Sie mit position absolute und immer den text zu nehmen, bis 100% Breite, ohne das einwickeln der text.

InformationsquelleAutor der Antwort

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.