Les divisions ne s'alignent pas correctement

Je suis absent depuis longtemps et je commence ma première construction depuis des années. C'est probablement quelque chose qui n'aurait pas été un problème avant plusieurs années de codage de la rouille!: Je pense que c'est un problème assez basique, mais ça me rend fou.Les divisions ne s'alignent pas correctement

J'ai construit deux conteneurs. Container1 (le rouge) est d'avoir une image à l'intérieur et ajuste bien à 70% de l'affichage. Container2 (le vert) est pour la légende etc, mais je ne peux pas l'obtenir de s'asseoir sous Container1. Il est actuellement coincé ferme au sommet de la page.

Toute aide avec ceci serait massivement appréciée.

#container1 { 
 
    width: 70%; 
 
    height: 70%; 
 
    position: absolute; 
 
    margin: auto; 
 
    top: 136px; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    background-color: red; 
 
    z-index: 2; 
 
    display: inline-block; 
 
} 
 

 
#container2 { 
 
    width: 100%; 
 
    height: 50px; 
 
    position: relative; 
 
    left: 0; 
 
    right: 0; 
 
    background-color: green; 
 
    z-index: 2; 
 
    display: inline-block; 
 
} 
 

 
img { 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
    position: absolute; 
 
    margin: auto; 
 
    border: 4px solid #ffffff; 
 
    border-bottom: 4px solid #ffffff; 
 
    box-shadow: 1px 1px 5px 1px #c9c9c9; 
 
    top: 0; 
 
    padding-bottom: 0px; 
 
    left: 0; 
 
    right: 0; 
 
}

<html> 
 

 
<head> 
 
    <link rel="stylesheet" href="layout.css"> 
 
</head> 
 

 
<body> 
 

 
    <div id="container1"> 
 
    <img src="image.jpg" alt="image" style="padding: 0px 0px 0px 0px;" align="center" /> 
 
    </div> 
 

 
    <div id="container2"> 
 
    CAPTION INFO TO GO HERE 
 
    </div> 
 

 
</body> 
 

 
</html>

Source

2017-07-29 The Nuge

Marque contenant deux blocs d'affichage au lieu de inline-block et donner un essai –

Vous pouvez vérifier aussi la balise ''

. Il incorpore de la place pour une image et une légende par défaut. Et oui, perdre le positionnement absolu/relatif, il n'y a pas besoin de. –

Comme vous l'avez mis Position: absolue dans votre # container1, il ne suit pas la mise en page normale de la page en position: relative signifie que # container2 se comportera exactement comme la position par défaut: statique jusqu'à ce que vous spécifiez une sorte de haut, gauche, droite ou bas. Donc, une façon de résoudre ce problème est de supprimer le positionnement absolu et relatif. Gardez le flux du document tel quel. Ce sera beaucoup plus facile.

Voici un link to an excellent tutorial pour réviser vos concepts de positionnement. Cela m'a beaucoup aidé.

J'ai joint une version simplifiée du code pertinent. Vérifiez-le.

#container1 { 
 
width: 70%; 
 
height: 170px; 
 
margin: 20px auto 10px auto; 
 
background-color: red ; 
 
} 
 

 

 
#container2 { 
 
width: 100%; 
 
height: 50px; 
 
background-color: green ; 
 
} 
 

 

 
img { 
 
max-width: 100%; 
 
max-height: 100%; 
 
margin: 0 auto; 
 
border: 4px solid #ffffff; 
 
border-bottom: 4px solid #ffffff; 
 
box-shadow: 1px 1px 5px 1px #c9c9c9; 
 
padding-bottom: 0px; 
 
}

<div id="container1"> 
 
<img src="image.jpg" alt="image" style="padding: 0px 0px 0px 0px;" 
 
align="center" /> 
 
</div> 
 

 
<div id="container2"> 
 
CAPTION INFO TO GO HERE 
 
</div>

Source

2017-07-29 20:23:39

Les divisions ne s'alignent pas correctement

Répondre

Questions connexes