web-dev-qa-db-fra.com

Texte enveloppant un div positionné absolu

Je sais qu'il y a quelques questions sur des sujets similaires, mais elles consistent principalement à faire flotter l'image/div. J'ai besoin que l'image (et le div) soit positionnée absolument (à droite) mais je veux simplement que le texte circule autour d'elle. Cela fonctionne si je laisse flotter la div mais que je ne peux pas le positionner où je veux. Comme c'est le texte coule juste derrière l'image.

    <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>

Est un exemple du HTML

avec le CSS étant:

    .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;
}

C'est un thème Drupal, donc aucun de ce code n'est le mien, c'est juste qu'il ne fonctionne pas complètement lorsqu'il s'agit de placer une image là-bas.

htmlpositionwrapabsolute
22
Paul Murphy

Le positionnement absolu élimine l'élément du flux de documents normal et n'interagit donc pas avec les autres éléments. Peut-être devriez-vous plutôt revoir la façon de le positionner en utilisant float, et posez des questions à ce sujet ici sur Stack Overflow si vous êtes bloqué :)

5
akamike

Je sais que c’est une question plus ancienne, mais j’ai trouvé le moyen de faire ce que j’essayais de faire. J'ai fait une solution en utilisant le sélecteur: before CSS, ce n'est donc pas génial avec ie6-7, mais partout ailleurs, vous devriez être bon. 

Fondamentalement, en plaçant mon image dans un div, je peux ensuite ajouter un long bloc float avant main pour le cogner et le texte l'enveloppe joyeusement!

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

}

Vous pouvez le voir ici:

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

19
Leonard

Lorsque vous positionnez une div de manière absolue, vous le retirez effectivement du flux de documents, de sorte que les autres éléments agissent comme si ce n'était pas le cas.

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

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

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

Espérons que cela fera l'affaire :)

5
Kyle

Comme mentionné par @Kyle Sevenoaks, vous supprimez du contenu le contenu positionné de manière absolue.

Autant que je sache, le seul moyen pour que le parent div encapsule le contenu positionné en absolu, consiste à utiliser javascript pour définir la largeur et la hauteur de chaque modification.

4
jeroen

A mon avis, le trait "Absolute" est mal nommé, car sa position est en fait relative au premier parent dont la position n'est pas statique

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

Je pense que la meilleure option consiste à ajouter une div supplémentaire après le contenu flottant, mais toujours dans le parent pour effacer les styles précédents.

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

Et CSS:

.clear
{clear:both;}
3
Chris G

J'avais besoin d'une solution similaire pour faire flotter une citation extensible (pas une image) qui aurait un texte de longueur variable à l'intérieur. La citation à extraire devait être insérée dans le code HTML en haut (en dehors du flux de texte) et flotter dans le contenu avec le texte qui l'entoure. En modifiant la réponse de Leonard ci-dessus, il existe un moyen très simple de le faire!

Voir Codepen pour des exemples de travail: 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

Il y a une solution facile à ce problème. Il utilise un espace blanc: nowrap;

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

Par exemple, je faisais un menu déroulant pour une navigation donc la configuration que j’utilisais est 

<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>

Exemples d'images

Sans Nowrap activé

Avec Nowrap activé

Aussi, si vous ne pouvez toujours pas le comprendre, consultez les listes déroulantes sur les modèles d'amorçage que vous pouvez rechercher sur Google. Découvrez ensuite comment ils fonctionnent car ils utilisent une position absolue et obtiennent une largeur de 100% du texte sans envelopper le texte.

0
user7479167

Voici une astuce qui pourrait fonctionner pour certains:

si vous avez un conteneur contenant beaucoup d'objets et que vous voulez que cet objet positionné apparaisse haut dans certains cas, et plus bas dans d'autres cas (tailles d'écran variées, par exemple), il suffit alors de disperser plusieurs fois des copies de l'objet. votre code HTML, soit inline(-block), ou avec float, puisdisplay:noneles éléments que vous ne voulez pas voir selon les conditions dont vous avez besoin.

Voici un JSFiddle pour montrer exactement ce que je veux dire: JSFiddle du bon positionnement haut et bas

Remarque: j'ai ajouté de la couleur uniquement pour l'effet. À l'exception des noms de classe, les sujets sujet-1 et sujet-2 sont par ailleurs des copies exactes l'un de l'autre.

0
Damian Green

Le positionnement absolu ne vous permet pas d’envelopper du texte. Vous devez utiliser float et position en utilisant margin ou padding.

0
iamtooamazing