Relative DIV parent pour hériter de la largeur de l'absolu enfant DIV

Je suis en train de la position d'un enfant DIV au fond d'un DIV parent, mais je voudrais également que le contenu de l'enfant DIV pour aider à dicter les dimensions de la DIV parent. Comme je l'ai maintenant, l'enfant DIV n'affecte pas la largeur ou de la hauteur de la DIV parent.

Voici un exemple de mon code HTML/CSS code:

//Code HTML:

<div id="parent">
    <h3>Top Aligned Title</h3>
    <div id="child"></div>
</div>

//Code CSS:

#parent {
    background-color:#222;
    position: relative;
    height: 500px;
}
#child {
    background-color:#444;
    position: absolute;
    bottom: 0px;
    width: 100px;
    height: 200px;
}

Que dois-je faire réaliser ce que je suis en train de faire? Je pourrais renoncer à l'absolu/relatif règles CSS et il suffit de créer un tableau à l'intérieur de la DIV parent qui me permettrait de réaliser à la fois le bas de l'alignement et de contenu qui dicte les parents dimensions.

Cependant, j'aimerais savoir si il y a une manière de le faire en CSS et sans avoir à régler la largeur de la DIV parent.

merci d'avance!

Voulez-vous dire que vous voulez #parent à prendre de la largeur de #enfant pour être 100px de large? Id alors faire votre #div parent "display: inline-block" et voir si c'est ce que vous êtes après.
Oui. Bien que la largeur de l'enfant DIV dans cet exemple est spécifié dans le CSS, la largeur de mon projet actuel est dicté dynamiquement dans le code JS.
Ce genre de chose? jsfiddle.net/Avww9
Le titre dans votre exemple de dicter la largeur de la DIV parent. Si le titre n'était pas aussi large que celui de l'enfant DIV, puis le DIV parent serait encore la largeur du titre et pas l'enfant DIV.
Juste assez - assez sûr de ce que vous voulez ne peut pas être fait avec css en solitaire.
merci pour l'aide, Billy!

InformationsquelleAutor jaxim | 2013-02-12

css

8

La réponse courte est que ce que vous demandez, fondamentalement, ne peut pas être fait avec du pur CSS /HTML. (au moins, sans tables) Vous auriez besoin de Javascript qui permettrait de lire #enfant, largeur/hauteur, puis de faire le calcul que vous voulez faire (je ne sais pas) et de définir une nouvelle hauteur/largeur de #parent.

Sinon, si vous voulez dire que vous voulez #enfant hauteur/largeur de changer en fonction de son contenu, bien sûr, c'est natif CSS, il suffit de le régler en hauteur/largeur de l'auto, et puis commencer à ajouter du texte à l'intérieur, vous verrez qu'il commence à se développer pour s'adapter à votre intérieur.

Que l'enfant est en position absolue, puis il est SORTI du flux normal du document, par conséquent, il ne sera pas affecter la #parent.
- C'est ce que je craignait. Je suppose que je peux régler la largeur de la DIV parent de façon dynamique une fois que je connais le contenu de l'enfant DIV. Sinon je suppose que je peux utiliser la balise table, la grande-veille à faire les choses rapidement en HTML.
- Eh bien, si vous pensez vraiment cela, votre conception a une certaine "logique" derrière elle, donc pour l'instant du moins- , JS (jQuery) est le chemin à parcourir..
InformationsquelleAutor George Katsanos

Moderne, avec des CSS, c'est faisable.

HTML:

<div id="parent">
    <h3>Top Aligned Title</h3>
    <div id="child">
        <p>CHILD ELEMENT</p>
    </div>
</div>

CSS:

#parent {
    background:red;
    height: 500px;
    position:relative;
}
#child {
    background:green;
    position: absolute;
    top:100%;
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
    width: 100px;
}

http://jsfiddle.net/Bushwazi/bpe5s6x3/

transform:translateY(-100%); est le truc. C'est mathématique est basé sur le element's box-model.
Vous pouvez également combiner top:50%; avec transform:translateY(-50%); pour le centrer.
Vous pouvez échanger top pour left et translateY pour translateX à la position de l'élément à l'horizontale.

InformationsquelleAutor Jason Lydon

Ici, vous allez

HTML:

<main id="parent">
  <div class="popup">Top Aligned Title
    <div class="content">
      Content
    </div>
  </div>
</main>

CSS:

#parent {
  width: 120px;
}

.popup {
  position: relative;
  margin-top: 48px;
}

.content {
  left: 0;
  position: absolute;
  background: green;
  width: 100%;
}

http://jsfiddle.net/8L9votay/

InformationsquelleAutor Marcel Tinner

Vous devez vous connecter pour publier un commentaire.