Alignement vertical, à droite et en bas ; multi-navigateurs

Question

Alignement vertical, à droite et en bas ; multi-navigateurs

Demandé el 16 de Mars, 2011: Quand la question a-t-elle été
449 affichage: Nombre de visites la question a
3 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Désolé si je ne peux pas expliquer avec du code, je suis débutant avec CSS. Comment puis-je faire cela ?

enter image description here

Code HTML :

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>CSS DIV issue</title>
</head>
<body>
  <div id="div1">
    <img src="image-800x216.gif" />
  </div>
  <div id="div2">
    <img src="image-567x43.gif" />
  </div>
</body>
</html>

Est prévu pour fonctionner avec IE (tous), Opera, Safari, Chrome et FF. C'est possible ou je suis un rêveur ?

Demandé el 16 de Mars, 2011 par quantme

Answer 1

3 Réponses

Answer 2

3voto

ted Points 4591

http://jsfiddle.net/XTkA2/30/

#div1 {
    position: absolute;
    top: 38%;
    right: 1em;
    width: 62%;
    max-width: 50em;
    outline:#999 solid 1px;
}

#div2 {
    position: absolute;
    bottom: 0.63em;
    right: 1em;
    width: 46%;
    max-width: 35.44em;
    outline:#999 solid 1px;
}

J'ai ajouté outline pour que vous fassiez div visibles. Vous pouvez les supprimer.

Répondu el 16 de Mars, 2011 par ted (4591 Points )

Answer 3

0voto

marcoaoteixeira Points 509

Euh...je ne comprends pas votre intention...mais...voulez-vous aligner deux images, l'une au-dessus de l'autre au centre de la page ou l'une à côté de l'autre ou les deux images en bas à droite ?

Si vous souhaitez aligner des éléments dans une page, essayez ceci :

/* Both images aligned side-by-side at page center */
div.div1, div.div2
{
  float: left;
  margin: 0 auto;
}

/* One images at right, another at left */
div.div1
{
  float: left;
}

div.div2
{
  float: right;
}

L'alignement en bas de page n'est pas possible... je suppose. Mais vous pouvez utiliser la propriété css margin-top pour faire l'affaire.

J'espère que cela vous aidera.

Répondu el 16 de Mars, 2011 par marcoaoteixeira (509 Points )

Answer 4

0voto

quantme Points 1417

Après avoir appliqué et mélangé vos réponses utiles et des heures et des heures de lecture et d'essai de code css/html provenant de différents sites.... J'ai ce que je veux ; enfin, presque à 95% à cause de la compatibilité des navigateurs. Voici le code :

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>CSS DIVs alignment issue</title>
  <style type="text/css">
    #div1 {
      width:62%;
      min-width:16em;
      max-width:50em;
      right:1em;
      top:38%;
      margin-right:1em;
      height:auto;
      z-index:0;
      position:absolute;
    }
    #div2 {
      width:46%;
      min-width:10em;
      max-width:35.44em;
      right:1em;
      bottom:6%;
      margin-right:1em;
      height:auto;
      z-index:0;
      position:absolute;
    }
    .stretch {
      width:100%;
      height:auto;
      min-width:10em;
    }
  </style>
</head>
<body>
  <div id="div1">
    <img src="http://placekitten.com/800/216" class="stretch" />
  </div>
  <div id="div2">
    <img src="http://placekitten.com/567/43" class="stretch" />
  </div>
</body>
</html>

D'ailleurs, bien que je préfère placehold.it a placekitten.com J'utilise la dernière parce que les images doivent être redimensionnées en même temps que l'écran.

Vous pouvez vérifier le résultat aquí . (Remerciements à ted )

Répondu el 17 de Mars, 2011 par quantme (1417 Points )

Alignement vertical, à droite et en bas ; multi-navigateurs

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Alignement vertical, à droite et en bas ; multi-navigateurs

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: