web-dev-qa-db-fra.com

Comment puis-je empiler automatiquement les divs verticalement à l'intérieur d'un parent?

Voici ce que j'essaie d'accomplir ...

  1. "parent" a la position: relative
  2. "div 1-3" ont la position: absolue

Cependant, chaque fois que je fais cela, je me retrouve à devoir attribuer des valeurs "top" spécifiques dans mon CSS. Donc div 1 pourrait être top: 50px, div 2 serait top: 150px, et div 3 serait top: 225px;

Existe-t-il un moyen de s'assurer que les divs continuent de s'empiler à l'intérieur du parent sans affecter de valeurs supérieures et/ou de positionnement absolu?

csshtmlpositionparent
23
Fingeldor

Un div devrait déjà s'afficher sous forme de bloc et occuper une "ligne" complète. Voici du HTML et du CSS pour donner un exemple, comparez-le à votre code:

http://jsfiddle.net/mWcWV/

<div id="parent">

    <div class="child">Foo</div>
    <div class="child">Bar</div>
    <div class="child">Baz</div>

</div>
23
Joseph

Devrait être droit:

HTML:

<div class="container">
    <div class="red"></div>
    <div class="blue"></div>
    <div class="green"></div>
</div>

CSS:

.container {
    position: relative;
    width: 500px;
    height: 500px;
    background-color: #ffbf00;
}
.red {
    background-color: #f00;
    width: 200px;
    height: 150px;
    margin: 5px auto;
}
.blue { 
    background-color: #0f0;
    width: 200px;
    height: 150px;
    margin: 5px auto;
}
.green {
    background-color: #00f;
    width: 200px;
    height: 150px;
    margin: 5px auto;
}

Vérifiez ceci violon .

3
TheVillageIdiot

Dans css utilisation du fichier ...

div
{
    display : block;
}

Ce qui donnera une ligne de rupture pour chaque bloc div et cette fonctionnalité est par défaut et n'utilise pas la technique relative - absolute.

2
Osahady

Les éléments Div sont des éléments de bloc, ce qui signifie qu'ils prendront une ligne complète et que tout élément à côté d'eux sautera une ligne. Faites juste:

<div></div>
<div></div>
<div></div>

Si cela ne fonctionne pas, vous devrez probablement les afficher: inline-block;

2
user1834464

Supprimez simplement le positionnement absolu. Centrez les divs en utilisant margin:auto, puis indiquez les marges verticales que vous souhaitez.

0
Mike Brant

Vous pouvez donner une marge à la division intérieure.

0
Gunjan Kothari