Préserver la normale mot d'habillage intérieur absolument conteneur positionné

J'ai une position absolue bloc de texte à l'intérieur un relativement conteneur positionné. La position absolue de l'élément dépasse la limite droite de son conteneur.

Le problème est: le texte n'est pas envelopper comme normale; il est en train de briser prématurément plutôt que d'étendre à ses régimes de max-width:

Comportement observé:

Comportement souhaité

Préserver la normale mot d'habillage intérieur absolument conteneur positionné

HTML/CSS (JSFIDDLE: http://jsfiddle.net/WmcjM/):

<style>
.container {
    position: relative;
    width: 300px;
    background: #ccc;
    height: 100px;
}

.text {
    position: absolute;
    max-width: 150px;
    left: 290px;
    top: 10px;
    background: lightblue;
}
</style>

<div class="container">
    <div class="text">Lorem ipsum dolor sit amet</div>
</div>

Remarque: quelques modifications qui apparaissent à obtenir le comportement souhaité, mais qui ne sont pas tout à fait ce que je suis à la recherche d', comprennent:

définition min-width: 150px sur .text (le texte peut-être juste un mot, et je ne veux pas le conteneur être surdimensionné)
positionnement .text. par rapport au document, plutôt que de .container (il doit apparaître à côté du conteneur, même lorsque le navigateur est redimensionnée)

Vous avez besoin d'un de ces zazzle.com/css_is_awesome_mug-168716435071981928

OriginalL'auteur Emmett | 2013-02-11

Essayez d'utiliser position: relative;.texte

EDIT: Aussi la mettre à l'intérieur d'une absolue positionné wrapper avec votre custom max-width

CSS

.container {
    position: relative;
    width: 300px;
    background: #ccc;
    height: 300px;
}

.wrap_text {
    position: absolute;
    max-width: 200px;
    top: 10px;
}

.text {
    position: relative;
    left: 290px;
    background: lightblue;
}

Et HTML:

<div class="container">
    <div class="wrap_text">
        <div class="text">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
    </div>
</div>

OriginalL'auteur Bogdan Rybak

6

changer la position absolue relative, et l'envelopper .texte dans un élément en position absolue.

http://jsfiddle.net/WmcjM/4/
```
.container {
    position: relative;
    width: 300px;
    background: #ccc;
    height: 300px;
}

.text {
    position: relative;
    /*min-width: 200px;*/
    left: 290px;
    background: lightblue;
}

.wrap {
    position: absolute;
    max-width: 200px;
    top: 10px;
}
```
Intéressant.. pourquoi ce travail? Quel est le comportement défini pour un position: relative élément à l'intérieur d'un autre position: relative élément?
réglage de la position:absolute supprime l'élément du flux normal de la structure du document, donc il ne sait pas comment à l'échelle de l'être.
Droit, mais il ne semble pas le savoir-faire de" si .text a left: 0 au lieu de left: 290px (c'est à dire lorsque la zone de texte ne doit pas dépasser le conteneur de la frontière).
Aussi, cette solution ne semble fonctionner car il n'y a rien d'autre dans le conteneur, et de la zone de texte position par défaut est 0,0. Si j'ajoute d'autres éléments du conteneur, puis la zone de texte est déplacé de l'endroit où je voudrais qu'il apparaisse.
Pour résoudre ce que vous pouvez envelopper .texte dans une position absolue d'un élément qui a une largeur définie (ce serait votre préféré "max-width")

OriginalL'auteur kylecblyth
0

Essayez d'utiliser transform: translate(x, y); au lieu de position: absolute; left: x; top: y;

OriginalL'auteur Ed Kolosovsky

Vous devez vous connecter pour publier un commentaire.