Absolue divs à côté de l'autre

Dans ma page html, j'ai deux divs à l'intérieur d'un div conteneur. Les deux intérieure divs avoir une "position: aboslute'. Parce qu'ils ont d'être placé dans le coin inférieur gauche de la div conteneur.

Cela fonctionne très bien lorsque le conteneur div n'a qu'un seul intérieure div. Mais quand j'ajoute un 2ème div, puis le 2ème div est placé ontop de la première intérieure div. Ce qui est logique, bien sûr. Mais maintenant, je vais essayer de trouver un moyen de les avoir à côté de l'autre au lieu de leur chevauchement eachother.

L'intérieur divs sont générés. Donc je ne peux pas ajouter manuellement un ID. Tout ce qu'ils ont est un nom de classe.

Exemple:

<div id="container">
    <div class="icon">ICON1</div>
    <div class="icon">ICON2</div>
</div>
#container {
    position: relative;
    width: 200px;
    height: 200px;
    border: 1px solid red;
}

.icon {
    position: absolute;
    bottom: 0;
    left: 0;
    border: 1px solid green;
}

Quelqu'un a une idée comment résoudre ce problème?

vous pourriez faire de leur position relative, parce qu'ils maintiennent mise en page par rapport à leur parent(récipient) de l'élément
Qu'en plaçant chaque ICÔNE dans un "li", par opposition à 'div' élément? Style les éléments de la liste est alors très flexible et simple!
juste utiliser le premier-enfant-dernier enfant, voir ma réponse

OriginalL'auteur w00 | 2012-07-13

  1. 7

    Utiliser le positionnement absolu sur un élément wrapper au lieu de chaque icône, vous pouvez flotter ou de la position des icônes comme vous le souhaitez à l'intérieur de ce conteneur:

    <div id="container">
    <div class="icon-wrapper">
      <div class="icon">ICON1</div>
      <div class="icon">ICON2</div>
    </div>
</div>
    #container {
    position: relative;
    width: 200px;
    height: 200px;
    border: 1px solid red;
}
.icon {
    border: 1px solid green;
    float:left;
}
.icon-wrapper {
    position: absolute;
    bottom: 0;
    left: 0;
}

    Démo: http://jsfiddle.net/sYGfq/3/

    OriginalL'auteur Wesley Murch

  2. 0

    S'il y a seulement 2 vous pouvez utiliser :d'abord l'enfant ou de l' :dernier enfant dans le css, pas besoin d'ajouter du html. Quelques lignes de css va prendre soin d'elle

    exemple ici http://jsfiddle.net/sYGfq/6/

    CSS pour le dernier enfant

    .icon:last-child {
    left: 200px;
    border: 1px solid green;
}
    Merci, mais je ne pense pas que dernier enfant est pris en charge dans IE7 (pas sûr de IE8).
    ensuite, utilisez d'abord l'enfant, l'un d'eux est pris en charge, reportez-vous à jsfiddle.net/sYGfq/8 dans IE 7
    Avez-vous vérifié que dans IE, car l'un d'eux se trouve en dehors de la div conteneur. D'ailleurs, à quoi bon ne "premier enfant" quand vous avez 3 ou plusieurs icônes.
    J'ai fait le premier enfant dans IE 7 mais sur VM. Il tombe parce que j'ai mis à gauche à 200. Dans sa question il mentionne seulement 2 et ma réponse. Si il y a plus d'icônes, il n'est pas évident, j'ai la question

    OriginalL'auteur Huangism

  3. 0

    Mettre les deux divs en deux cellules dans un tableau, supprimer toutes les frontières et le remplissage de la table et absolument le placer dans le coin en bas à gauche de la div parent.

    <div id="container">
<table class="none" id="table1">
<tr class="none">
<td class="none">
<div class="icon">ICON1</div>
</td>
<td class="none">
<div class="icon">ICON2</div>
</td>
</tr>
</table>
</div>
    #container {
    position: relative;
    width: 200px;
    height: 200px;
    border: 1px solid red;
}

.icon {
    border: 1px solid green;
}

.none {
    border: 0;
    padding: 0;
}

#table1 {
    position: absolute;
    bottom: 0;
    left: 0;
}

    Presto!

    OriginalL'auteur The_HTML_Man