L'Habillage du texte autour d'une absolue positionné div

Positionnement absolu prend l'élément hors de la normale de la circulation des documents, et, par conséquent, il n'interagit pas avec les autres éléments. Peut-être vous devriez revist comment le positionner à l'aide du flotteur au lieu de cela, et informez-vous ici sur un Débordement de Pile si vous êtes coincé 🙂

OriginalL'auteur akamike

Lorsque vous placez une div absolument, vous êtes effectivement de le retirer de la circulation des documents, de sorte que les autres éléments de la loi comme si elle n'y est pas.

Pour contourner ce problème, vous pouvez à la place utiliser des marges:

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

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

J'espère que ça va faire l'affaire 🙂

OriginalL'auteur Kyle

Dans mon opinion, "l'Absolu" trait est mal nommée, car sa position est en fait par rapport à la première parent dont la position n'est pas statique

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

OriginalL'auteur Matt

J'avais besoin d'une solution similaire à flotter un gigogne devis (pas une image), ce qui aurait variable de la longueur du texte à l'intérieur. L'arrachement de devis nécessaires pour être insérée dans le code HTML en haut (à l'extérieur de la fluidité du texte) et le flotteur vers le bas dans le contenu du texte qui s'enroule autour de lui. La modification de Leonard de réponse ci-dessus, il y a vraiment une façon simple de le faire!

Voir Codepen pour Exemple: 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>

OriginalL'auteur Chadwick Meyer

Voici une astuce qui pourrait fonctionner pour certains:

si vous avez un conteneur emballé avec beaucoup d'objets, et vous voulez que l'objet positionné à paraître en certains cas, et inférieure dans les autres cas (différentes tailles d'écran par exemple), puis parsemer de copies de l'objet à plusieurs reprises dans votre code html, soit inline(-block), ou avec float, puis display:none les éléments que vous ne voulez pas voir selon les conditions dont vous avez besoin.

Ici est un JSFiddle pour montrer exactement ce que je veux dire: JSFiddle de droit de positionnement de haute et basse

Note: j'ai ajouté de la couleur seulement pour l'effet. Sauf pour les noms de classe, l'objet de la 1 et 2 divs sont par ailleurs des copies exactes de chaque autre.

OriginalL'auteur Damian Green