Alignement des divs vers le haut

J'essaie de créer une mise en page vraiment basique avec deux divs. L'idée est d'avoir une div à gauche et l'autre à droite dans la même ligne. Cependant, ils n'ont pas la même taille.Alignement des divs vers le haut

Pourquoi le plus petit div est-il aligné sur le bas plutôt que sur le haut? N'est-ce pas le comportement attendu dans la page qui coule?

<body> 
    <div> 
     <div class="left debug-green"></div> 
     <div class="right debug-red"></div> 
    </div> 
</body> 


body { 
    font-size: 0; 
} 
.left { 
    width: 50%; 
    height: 30px; 
    display: inline-block; 
} 
.right { 
    width: 50%; 
    height: 20px; 
    display: inline-block; 
} 
.debug-red { 
    background-color: rgb(255, 0, 0); 
} 
.debug-green { 
    background-color: rgb(0, 255, 0); 
}

Ceci est un exemple violon js:

http://jsfiddle.net/3nAsx/

Source

2014-06-05 andymaster01

La plupart des navigateurs rendent élément inline-block avec la valeur par défaut vertical-alignment et cette valeur est la suivante: baseline

vertical-align valeurs:

vertical-align: baseline  /* keyword values */ 
    vertical-align: sub 
    vertical-align: super 
    vertical-align: text-top 
    vertical-align: text-bottom 
    vertical-align: middle 
    vertical-align: top 
    vertical-align: bottom 
    vertical-align: 10em   /* <length> values */ 
    vertical-align: 4px 
    vertical-align: 20%   /* <percentage> values */ 
    vertical-align: inherit

Source

2014-06-05 04:09:37 kyooriouskoala

ajouter à droite div

vertical-align: top;

Source

2014-06-05 01:54:30

mais, quelle est la raison derrière le div aligner au fond? est la spécification css dans un endroit définissant cette valeur? – andymaster01

Vous pouvez remplacer les déclarations display:inline-block; avec float:left;. Puisque vous spécifiez les dimensions de toute façon, vous n'avez pas besoin de la propriété inline-block. Voici à quoi cela ressemble après avoir fait le changement.

enter image description here

code

.left { 
    width: 50%; 
    height: 30px; 
    float:left; 
} 
.right { 
    width: 50%; 
    height: 20px; 
    float:left; 

}

Source

2014-06-05 01:58:28

merci, mais quelle est la raison de la div d'être aligné en bas? – andymaster01

Bonne question, pas sûr, mais probablement un défaut. –

-alignement vertical: top;

Est une bonne option.

Mais si vous voulez juste un div à gauche et l'autre à droite.

Donner float: left à gauche div et float: right à droite div

Source

2014-06-05 01:58:45 Tushar

De cette façon est bon court codage

<div class="wrap"> 
    <div class="left debug-green"></div> 
    <div class="right debug-red"></div> 
    </div> 

    .wrap div{ 
    width: 50%; 
    height: 30px; 
    display: inline-block; 
    background-color: green; 
    float:left; 
    vertical-align:top; 
    } 

.right { 
    height: 20px !important; 
    background-color:red !important; 
    }

Source

2014-06-05 03:32:33 Kisspa

Alignement des divs vers le haut

Répondre

Questions connexes