Comment placer une div à l'intérieur d'une div en position absolute?

Par exemple, je voudrais créer un modèle comme dans l'image ci-dessous.

Comment placer une div à l'intérieur d'une div en position absolute?

Comment faites-vous la position de chaque div à l'intérieur du conteneur à sa position absolue? Je préfère sans avoir à utiliser float-attributs. Tout court d'exemples serait appréciée.

Vous voulez dire : vous ne savez rien à propos de html et que vous voulez quelqu'un d'autre pour faire un gabarit html pour vous ?
Vous vous trompez, mon ami, il est css 🙂 Essayez d'être plus convivial, la prochaine fois, il n'y a aucun obstacle unique, vous empêchant de vous que.

OriginalL'auteur Stybos | 2013-02-25

  1. 32

    Vous pouvez utiliser absolute et relative positionnement.

    par exemple

    html

    <div id="container" class="box">
    <div class="box top left"></div>
    <div class="box top center"></div>
    <div class="box top right"></div>

    <div class="box middle left"></div>
    <div class="box middle center"></div>
    <div class="box middle right"></div>

    <div class="box bottom left"></div>
    <div class="box bottom center"></div>
    <div class="box bottom right"></div>
</div>

    css

    #container{
    width:200px;
    height:200px;
    position:relative;
    border:1px solid black;
}
.box{
    border:1px solid red;
    position:absolute;
    width:20px;
    height:20px;    
}

.top{top:0}
.middle{top:50%;margin-top:-10px;/*half of the .box height*/}
.bottom{bottom:0}

.left{left:0;}
.center{left:50%;margin-left:-10px;/*half of the .box width*/}
.right{right:0;}

    Démo à http://jsfiddle.net/gaby/MB4Fd/1/

    (bien sûr, vous pouvez ajuster le positionnement réel pour vous de préférence, en changeant le haut/gauche/droite/bas valeurs)

    OriginalL'auteur Gabriele Petrioli

  2. 5

    Utilisation position: relative; sur le récipient (un <div> contenant tout le contenu) et absolument placer les éléments enfants. L'enfant des éléments à l'intérieur du conteneur sera positionné par rapport au conteneur de sorte qu'il serait assez facile de jeter le tout à vos besoins.

    Cependant, Il est considéré comme une mauvaise pratique à utiliser positionnement dans la plupart des cas à lay votre site .. je suggérerais à l'aide de flotteurs, même si vous prétendez le souhaitez pas, vous aurez beaucoup plus de cohérence à travers les différents navigateurs.

    Lire cette article si vous êtes confus au sujet de flotteurs

    OriginalL'auteur Adrift