position divs en haut et en bas de la div contenant

J'ai un div conteneur qui a un contenu qui aura parfois besoin d'être divisé par class="top" et class="bottom". Évidemment, il n'y a pas de float:top ou float:bottom, alors quel est le meilleur moyen d'y parvenir avec le html/css seul?

Ex:

<div class="content">
        <div class="left">
            <a href="#"><img src="img/home.jpg" alt="salon home"></a>
        </div><!-- end left -->
        <div class="center">
            <a href="#" class="top"><img src="img/about.jpg" alt="about salon"></a>
            <a href="#" class="bottom"><img src="img/services.jpg" alt="salon service"></a>
        </div><!-- end center -->
        <div class="right">
            <a href="#" class="top"><img src="img/products.jpg" alt="salon products"></a>
            <a href="#" class="bottom"><img src="img/contact.jpg" alt="contact salon"></a>
        </div><!-- end right -->
    </div><!-- end content -->

#container .content {
    margin-top: 115px;
}

#container .content .left {
    float: left;
    width: 307px;
}

#container .content .center {
    float: left;
    padding-left: 19px;
    width: 307px;
}

#container .content .right {
    float: right;
    width: 307px;
}

ETA - VIOLON - http://jsfiddle.net/FaTxw/2/

  • Positionnement absolu?
  • qui permettrait de désactiver float:right et float:left, non?
  • Êtes-vous essayer de forcer <a href="#" class="top"> vers le haut, et <a href="#" class="bottom"> vers le bas? Il est assez difficile de déterminer le résultat exact que vous êtes désireux de votre question.
  • Oui, c'est exactement ce que je suis désireux de faire/
InformationsquelleAutor AMC | 2013-04-12
  1. 4

    Vous pouvez faire cela avec quelques étapes faciles.

    1) Ajouter le positionnement relatif de conteneurs parent:

     #container .content .left,
 #container .content .center,
 #container .content .right { 
    position: relative;
 }

    2) la valeur de l'enfant les éléments à positionnement absolu.

    #container .content .top,
#container .content .bottom {
   position: absolute;
}

    3) Définir les éléments à haut et en bas.

    #container .content .top {
   top: 0;
}

#container .content .bottom {
   bottom: 0;
}

    4) Réglez la hauteur de tous les parents de conteneurs à 100%

    html, body, #container, .content, .left, .right, .center {
    height: 100%;
}

    5) Définir un min-height sur le récipient de sorte que le haut et le bas enfants ne se chevauchent pas.

    #container {
    min-height: 349px;
}

    Voir un exemple: http://jsfiddle.net/FaTxw/3/

    • Cela semble être très bien dans le bon sens, cependant, après la mise en œuvre le code ci-dessus, les éléments que j'ai appliqué .top et .bottom sont coincé tout en haut de la page. Des idées? jsfiddle.net/FaTxw
    • J'ai mis à jour ma réponse avec quelques étapes supplémentaires. Vous avez besoin de régler la hauteur sur les contenants pour les positions sont correctes. J'ai inclus une mise à jour de votre JSfiddle comme un exemple de travail.
    • Qui l'a fait! Merci!!!!
    InformationsquelleAutor Axel